XHTML+CSS Web ページ作成における美しいスタイルシートの適用

これはかなり前に書かれた記事です。今となっては、その中の考え方は学ぶ価値があるように思えます。jb51.net の事例を研究しながら、理論的な知識も学んでおくと、知識の飛躍に非常に役立つでしょう。さあみんな！

私は、Zeldman 氏の代表作である「Designing with Web Standards」（中国語版は「Website Refactoring」（第 2 版））を読んで以来、深い感銘を受け、Web 標準を使用してプロジェクトを開発および実装するという私の考えを強化しました。しかし、Web 標準とは何か、それを実際のプロジェクトにどのように適用するかを知るだけでは十分ではありません。 Web 標準の各コンポーネントを 1 つずつ学習して適用し、1 つずつ分解して初めてその本質を発見することができます。私のようなウェブ開発者やデザイナーにとって、この原則を理解し、的を絞った学習と実践を行えば、より多くのことが得られ、中国におけるウェブ標準の適用に貢献できると信じています。 (ハハ、これは少し自慢しているように聞こえるかもしれませんが、実際、これは私たちソフトウェア実務者のほとんどにとっての理想です。)

今は Web2.0、さらには 3.0 の時代であり、XHTML、XML、CSS、ECMAScript、DOM の時代です。これらは最終的なテクノロジーではありませんが、組み合わせることでソリューションが形成されます。これは、下位互換性のある Web サイトを構築する計画の基盤であり、Web 標準に準拠した Web サイトを作成するために必要な技術的基盤です。私たちは、より多くのユーザーのサポートと訪問を獲得するだけでなく、長期間にわたってユーザーの注目を集める、長持ちする美しい Web サイトを構築したいと考えています。 CSS を使用して Web サイトを改善する方法を学ぶことは、注目を集める良い方法であり、Web2.0 時代の流行の開発トレンドでもあると私は信じています。以下では、CSS テクノロジーから得た経験についてのみ説明します。

CSS の専門家になりたい場合、CSS セレクターの使用に習熟するだけでは十分ではありません。また、作業全体の計画、ワークフローの習熟、スタイルシートの保守性と効率性の向上にも依存します。 CSS を使用すると、私たちが望む素晴らしい Web サイトを作成できます。また、CSS を記述すること自体も楽しいものです。では、より魅力的なスタイルシートを作成するにはどうすればよいでしょうか?スタイルシートにはどのような特性が必要ですか?勉強と私自身の仕事経験を組み合わせて、絶妙なスタイルシートを作成するための優れた方法をまとめました。

1. CSSにマークアップを詰め込みすぎない

スタイルシートをリンクまたはインポートするのは困難な作業のように思えるかもしれません。多くのウェブサイト開発者がきちんと整理された CSS ドキュメントを持っているのを見てきましたが、短期間ですぐに更新できなかったり、管理が面倒だったりして、以前作成した精巧なスタイルシートがだんだんとゴミになってしまいます。何百ものコンテンツを公開する必要がある大規模な Web サイトで作業する場合。時間は限られているため、すばやく変更や更新を行うには、CSS をネストまたは配置する必要があります。この習慣は時間が経つにつれて続き、ある日、サイトが完全に再設計される（ただしコンテンツは同じまま）と言われ、テストを含めて作成に 1 週間しか残されていないことになります。一般的に言えば、スタイルシートの更新は、長期間にわたってサイトの散在する領域に変更を加えたり、サイトのスタイルシート構造を全体的に把握していない場合を除き、非常に簡単なアプローチです。

スタイルシートのリンクやインポートは、行き当たりばったりの作業ではありません。きれいなスタイルシートを作成し、それに従えば、仕事がより楽しくなります。注意: コンテンツを更新または追加するたびに新しいスタイルシートを作成しようとすると、間違いなく問題が発生します。リンクおよびインポートされたスタイルシートが多すぎると、バグの排除が困難になり、スタイルシートの保守が困難になる可能性があります。大規模な Web サイトでは、さまざまな部分ごとに個別のスタイルシートを作成するのは当然のことです。ただ、極端になりすぎないように注意してください。スタイルシートを大量に追加すると、HTTP リクエストが増加し、その後の作業に影響する可能性があります。

2. 意味的な定義は明確で理解しやすい

コンテンツを表現するのに最も適切で意味のある要素を選択するだけでなく、class 属性と id 属性の値も必ず選択する必要があります。明確な定義によりメンテナンスが容易になり、チーム全員が理解できるようになります。この定義を見てください:

.l10k { color: #369; } 、 .left-blue { color: #369; } 、私が作った場合、その意味は分かるかもしれませんが、他の人は理解できないかもしれません。たとえ今日その意味を知っていたとしても、何年も経った後もその意味を知っていると保証できるでしょうか? クラス属性に色や長さ、幅の寸法を追加しないことをお勧めします。より適切な命名規則は次のとおりです: .work-description { color: #369; }

3. 条件付きコメントを追加するタイミングとテクニックの適用方法を知る

いくつかのトラブルシューティング手法について多くの記事が書かれており、条件付きコメントは IE のリリースを制御するのに適した方法です。条件付きコメントは CSS 全体に記述するよりもはるかに優れていることに同意しますが、最近、これが最善の解決策ではないという証拠がたくさんあることに気づきました。要素に最小の高さを設定したいのですが、IE6 ではそれが強制されないため、使用できる高さはすべて同じように扱われることがわかります。スタイルシートを再構築し、マークアップに条件付きコメントを追加して、このルールに従うだけで済むようにしてみませんか?最小の高さと高さのルールを一緒にして、トリックを選択して同じ CSS ドキュメントに保持する方がよいのではないでしょうか。この場合、このアプローチを使用するのは難しいと思います。

4. WebページにCSSを適用し、外部スタイルシートを使用する

何かメリットはありますか？誰もがこれについてはかなり明確に認識しており、もちろん、コードの再利用を最大化し、Web サイトファイルの構成を最適化できることは否定できない点です。
さて、上記は私の個人的な意見の一部です。友人たちが私にもっと多くの提案をしてくれることを願っています。あなたの提案は、困難に挑戦する私のモチベーションです！ありがとう！

<<: Vue カプセル化コンポーネントアップロード画像コンポーネント

>>: MySQL 5.7 クラスタ構成手順