ウェブサイトデザインの合理的な構造 CSS_html/css_WEB-ITnose

Architecture CSS
現在のブラウザが概ねサポートしているという前提のもと、CSSには前例のない使命が与えられています。ただし、CSS に依存するほど、スタイル シート ファイルは大きくなり、より複雑になります。これに伴い、ファイルのメンテナンスと整理という課題も生じます。
（昔は）CSSファイルは一つだけで十分だった?? 全てのルールがまとめられていて、追加したり削除したり修正したりするのに非常に便利?? でも今は昔のことです。 (現在) 新しい Web サイトを構築するときは、CSS をどのように編成して構造化するかを計画するのに時間を費やす必要があります。

ファイルの整理
CSSシステム構築の最初のステップはアウトラインの策定です。 CSS 構成計画の重要性は、Web サイトのディレクトリ構造に匹敵すると考えています。 (注: 記憶しやすくするために、誇張した言葉を使用してください。) すべてに対応する万能の解決策はありません。そのため、いくつかの基本的な組織的解決策と、それぞれの長所と短所について説明します。

メイン CSS ファイル
通常、メイン CSS ファイルを使用して、すべてのページに共有されるルールを配置できます。このファイルには、デフォルトのフォント、リンク、ヘッダー、およびその他のスタイルが含まれます。メインの CSS ファイルを配置したら、高レベルの組織戦略の検討を開始しました。

方法 1: プロトタイプに基づく
最も基本的な戦略は、アーキタイプ ページに基づいて CSS ファイルを分離することです。 Web サイトのホームページ、サブページ、ポートフォリオ ページのデザインが異なる場合は、プロトタイプ ベースの戦略を使用できます。 (この戦略のもとでは) 各ページには独自の CSS ファイルが存在します。
プロトタイプの数が多くない場合、この方法はシンプルで明確で効果的です。ただし、ページ要素が各プロトタイプ ページに段階的に配置されていない場合、問題が発生します。サブページと結合ページがいくつかの要素を共有しているが、ホームページが共有していない場合、どうすればよいでしょうか?
共有要素をメイン CSS ファイルに追加します。これは最も純粋な解決策ではありませんが、特定の状況では機能します。しかし、Web サイトが巨大な場合、メインの CSS ファイルは急速に拡張され、不必要な大きなファイルのインポートを避けるというファイルを分割する目的が無効になります。
結合ページとサブページのcssファイルにスタイルコードのコピーを置きます。 (これを行うことは) 冗長なコードを維持することを意味しますが、明らかにそれは望ましくありません。
この2つのページで共有する新しいファイルを作成します。いいね。しかし、コードが 10 行しかない場合、この 10 行のコードを共有するためだけにこのファイルを作成するのでしょうか (注: ニワトリをナイフで殺すことですか?) この方法は非常に純粋ですが、Web サイトが巨大で、少数の要素を共有する多くのページのペア (注: ナイフでニワトリを殺す?) : たとえば、30 のページのペアがそれぞれ 10 行のコードを共有します)、これは非常に面倒に思えます。
すべての共有要素のスタイルを含む別の CSS ファイルを作成します。この方法の方が簡単かもしれませんが、サイトのサイズと共有要素の数によって異なります。非常に迷惑な状況が発生します。大きな CSS ファイルがインポートされているのに、ページで使用されているのはスタイルのほんの一部だけです...これも、ファイルを分離するという本来の目的を無効にします。
これを私は重複のジレンマと呼んでいます。断片化された CSS ルールには重複する部分が多く、それらを整理する完全に明確な方法はありません。

方法 2: ページ要素/ブロックに基づく
Web サイトがサーバーサイドインクルードを使用している場合、この方法は非常に優れています。たとえば、ヘッダー インクルードを使用する場合、対応する独自の CSS ファイルが存在します。フッターや他の部分へのインクルードも同様の方法で行うことができ、独自の CSS ファイルをインポートするだけです。この方法はシンプルでクリーンですが、小さな CSS ファイルが大量に生成される可能性があります。
たとえば、フッター スタイルに必要な CSS コードが 20 行だけの場合、別のファイルを作成する価値はありません。この方法では、各ページに大量の CSS ファイルが含まれることになります。これは、インクルードと同じ数の CSS ファイルがあるからです。

方法 3: タグに基づく
このソリューションは、前のソリューションと同様、直感的で実用的です。 Web サイトに合計 30 ページがあり、そのうち 10 ページにフォームが含まれている場合、フォームのスタイルを特別に処理する CSS ファイルを作成し、それをこれらの 10 ページにのみインポートできます。他の 10 ページに表が含まれている場合は、表のスタイルを処理するための専用のファイルを作成します。