ウェブサイトデザインに適した合理的な構造CSS

アーキテクチャ CSS

現在のブラウザーが一般的にサポートしているという前提のもと、CSS には前例のない使命が与えられています。ただし、CSS に依存するほど、スタイル シート ファイルは大きくなり、より複雑になります。これに伴い、ファイルのメンテナンスと整理という課題も生じます。

（昔は）CSS ファイルは 1 つだけで十分でした - すべてのルールが 1 つにまとめられており、追加、削除、変更が簡単でした - しかし、最近は昔の時代です。 (現時点では) 新しい Web サイトを構築するときは、CSS をどのように編成して構造化するかを計画するのに時間を費やす必要があります。

ファイルの整理

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

メインCSSファイル

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

方法 1: プロトタイプに基づく

最も基本的な戦略は、アーキタイプ ページに基づいて CSS ファイルを分離することです。 Web サイトのホームページ、サブページ、ポートフォリオ ページのデザインが異なる場合は、プロトタイプ ベースの戦略を使用できます。 (この戦略のもとでは) 各ページには独自の CSS ファイルが存在します。

プロトタイプの数が多くない場合、この方法はシンプルで明確で効果的です。ただし、ページ要素が各プロトタイプ ページに段階的に配置されていない場合、問題が発生します。サブページと結合ページには一部の要素が共有されているが、ホームページには共有されていない場合は、どうすればよいでしょうか

共有する要素をメインの CSS ファイルに追加します。これは最も純粋な解決策ではありませんが、特定の状況では機能します。しかし、サイトが巨大な場合、メインの CSS ファイルはすぐに肥大化し、不必要に大きなファイルのインポートを避けるというファイルを分割する目的が損なわれます。

結合ページとサブページのcssファイルにスタイルコードのコピーを置きます。 (これを行うことは) 冗長なコードを維持することを意味しますが、明らかにそれは望ましくありません。

この2つのページで共有する新しいファイルを作成します。いいね。しかし、コードが 10 行しかない場合、この 10 行のコードを共有するためだけにこのファイルを作成するのでしょうか (HTML または注: ナイフで鶏を殺すこと?) この方法は非常に純粋ですが、Web サイトが巨大な場合は、少数の要素を共有する多くのページ (html または注: たとえば、30 組のページがそれぞれ 10 行のコードを共有する場合)、非常に面倒に見えます。

すべての共有要素のスタイルを含む個別の CSS ファイルを作成します。この方法の方が簡単かもしれませんが、サイトのサイズと共有要素の数によって異なります。非常に迷惑な状況が発生します。つまり、大きな CSS ファイルがインポートされているのに、ページ上でスタイルのごく一部しか使用されていないということです。これもまた、ファイルを分離するという本来の目的を無効にしてしまいます。

これを私は重複ジレンマと呼んでいます。断片化された CSS ルールには重複する部分が多く、それらを整理する完全に明確な方法はありません。

方法 2: ページ要素/ブロックに基づく

ウェブサイトがサーバーサイドインクルードを使用している場合、この方法は非常に優れています。たとえば、ヘッダー インクルードを使用する場合、対応する独自の CSS ファイルが存在します。フッターや他の部分へのインクルードも同様の方法で行うことができ、独自の CSS ファイルをインポートするだけです。この方法はシンプルでクリーンですが、大量の小さな CSS ファイルが生成される可能性があります。

たとえば、フッター スタイルに必要な CSS コードが 20 行だけの場合、別のファイルを作成する価値はありません。そして、この方法では、各ページに大量の CSS ファイルが含まれるようになります。これは、インクルードと同じ数の CSS ファイルが存在するためです。

方法 3: タグに基づく

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

その他の整理のヒント

文書を整理する主観的な方法に加えて、印刷物、携帯端末、スクリーンなどの複数のメディアタイプも考慮する必要があります。これは明確に定義されていますが、ファイル構造を確立する際には依然として考慮すべき要素です。複数のメディア タイプをサポートする必要がある場合は、メイン CSS ファイルの一部のルールを再検討する必要がある場合があります。

さらに、ブランドの協力も重要な要素となる可能性があります。 （htmlまたは注：GoogleとNikeが共同で立ち上げたjogaなど） ブランドの共同ブランディングに関わる場合、どの要素を相手のブランドに合わせて調整するかを考慮する必要があります。たとえば、それぞれ異なる CSS ファイルを使用します。

もう 1 つの見落とされがちなヒント: ネストされた @import ステートメントを使用します。 CSS ファイルは、一連の @import ステートメントを含めるか、いくつかの CSS ルールを追加するだけで作成できます。この方法でWebサイト本体のCSSファイルを完全に作成することができます（@importを使用して各パーツのスタイルファイルをインポートします）。 Web サイトの各ページに 4 つまたは 5 つの異なる CSS ファイルをインポートする場合は、間違いなくこの手法の使用を検討する必要があります。

ルールとセレクターの整理

ファイルの整理について話した後、ファイル内の内容を整理する方法について話し合いましょう。当然のことながら、ファイル内をスムーズに参照して、編集するセレクターまたはルールをすばやく見つけたいと考えます。

冗長性 vs. 依存性

Dave Shea が記事「冗長性 vs. 依存性」で述べているように、カスケードを常に理解する必要があります。セレクターをグループ化する (依存関係を意味する) か、セレクターを分離する (冗長性を意味する) かを決定する必要があります。グループ化するとコードを簡潔に保つことができますが、依存関係が確立されるため、メンテナンスのオーバーヘッドが増加します。グループ化しないと、ファイル サイズが増大し、同様のセレクターの一貫性を保つことが困難になります。これらのトレードオフとトレードオフを行うことによってのみ、私たちは常に正しい決定を下すことができます。