最近、同じテーマで使用される27の異なるCSSファイルがあるプロジェクトに遭遇しました。これらは、アプリケーションの特定のセクション用であり、ルールは次のように分割されます。メニューバー用のCSSファイルがあり、連絡先フォーム用のファイルがさらに2つあります。 1つはフッター、特定のページの書式設定、2つはギャラリー用などです。
そこで、CSSファイルが非常に多い理由と、連結しても安全かどうかをリードに尋ねました。
彼の回答は、すべてのファイルの合計が126KBであり、帯域幅が重要であり、500以上のCSSルールがあるため、セレクターの衝突を防ぐために連結しないことをお勧めします。
126KBの非圧縮CSSファイルが非常に多いことは知っていますが、（ベストプラクティスガイドから）これらのファイルはすべてシングルショットでダウンロードする必要があることも知っています。そのため、ブラウザーは、ブラウジング全体で1つずつダウンロードするのではなく、1つの大きなファイルをキャッシュします。セッション。
これらすべてのファイルを一緒に接着しないようにしないのはなぜですか？大したことですか？
カスケードの仕組みにより、ファイルをソースに表示された順序で保持していれば、ファイルを連結するだけで害を及ぼす可能性はありません。これにより、前のファイルをオーバーライドする後のファイルでも確実にオーバーライドされます。
次に、CSSの縮小を検討できます。これはセレクターの機能を変更しませんが、帯域幅を減らすためにセレクターを圧縮します。
全体として、27個のCSSファイルを持つのはばかげています。ユーザーは、ページを表示するためだけに、27の接続が確立され、要求が行われ、ダウンロードが完了するのを待つ必要があります。さて、これは適切なキャッシュでいくらか改善されますが、それでも...
これらすべてのファイルを一緒に接着しないようにしないのはなぜですか？大したことですか？
CSSファイルに競合するディレクティブがなく、アプリケーションの各ページで同じ順序でロードする必要があることがわかっている場合は、実際には、それらを1つの縮小されたCSSファイルにバンドルする必要があります。
しかし、それだけです。通常、このような状況に陥った場合、どのCSSディレクティブがどの画面に適用されているかを識別するのは非常に困難です。
強調：あなたが直面している状況は技術的負債を示しています。
27個のCSSファイルは完全にナッツであり、理想的にはマージして縮小する必要があることに同意しますが、スタイルシートを分割することが理にかなっているユースケースがいくつかあります。
これを考慮してください：あなたは、サイトで他の方法で使用されていない、多数のCSSルールを必要とするサブサイトで作業しています。ユーザーがサブサイトとメインサイトの両方にアクセスする（したがってキャッシュを利用する）保証がない場合は、2つのスタイルシートを保持するのが理にかなっているため、ブラウザーは巨大なスタイルシートを読んで表示する必要がありません。 HTMLドキュメントに一致するものがある場合。
現在、これは一般的なケースではありませんが、実際に発生します。例としては、独自のサイトを持つ多くの細分化がある大企業があります。それらには、すべての共有スタイル（企業固有のUIなど）用の1つのスタイルシートと、レイアウトとオーバーライド用の個別のスタイルシートが含まれる場合があります。
そうは言っても、27のスタイルシートが意味をなさないかどうかは非常に疑わしい。元の作者はおそらく手がかりを持っていなかったでしょう、そしてそれがそのようにより構造化されていると思いました。モジュール化されたCSSは実際にはかなりきれいですが、クライアントに到達する前に常にマージして縮小する必要があります。これはSASSの一般的な作業方法です。サイトの特定の部分や機能の部分的なスタイルシートがたくさんありますが、Ctrl+Sを押すとすぐに、自動的に1つのすっきりとした小さなパッケージにマージされます。
これで、各ページにアクセスして順序を確認するだけで、サイトのCSSファイルがロードされる順序を理解できる可能性があります。それは退屈な作業であり、それが実際に報われるという保証はありませんが、それは可能です。