多くのCSSファイルの代わりに1つのCSSファイルを使用していないのはなぜですか？

Question

私は最近の同じテーマで使用される異なるCSSファイルを持つプロジェクトを見つけました。これらはアプリケーションの特定のセクション用です。ルールは次のように分割されています。メニューバー用のCSSファイルが2つあります連絡先フォーム、別のページはフッター、特定のページの書式設定、ギャラリー用の2つのページなどがあります。

私は、非常に多くのCSSファイルの理由と、連結するのが安全かどうかをリードに尋ねました。

彼の返信は、すべてのファイルの合計が126KB、帯域幅が問題で、500以上のCSSルールがあるため、セレクタの衝突を防ぐために連結しないことをお勧めします。

私は、圧縮されていないCSSファイルは126KBで非常に多いことを知っていますが、（ベストプラクティスガイドから）これらのファイルをすべて一括ダウンロードする必要があることも知っています。 1つはブラウジングセッションを通過します。

これらのファイルをまとめて貼り付けるのはどうしてですか？大したことですか？

Answer 1

カスケードの仕組みによって、ソースに表示された順序でファイルを連結しておくだけで、ファイルを連結して害を及ぼすことはできません。これにより、それ以前のファイルをオーバーライドした後のファイルでもそれが確実に行われます。

次に、CSSを縮小することを検討できます。これにより、セレクタの機能は変更されませんが、帯域幅を縮小するために圧縮されます。

27個のCSSファイルを持つことはまったく愚かです。ユーザーは、ページを表示するために、27の接続が確立され、要求が行われ、ダウンロードが完了するのを待たなければなりません。さて、これは適切なキャッシュでいくらか改善されますが、それでも...

Answer 2

これらのファイルを一緒に貼り付けるのはどうしてですか？大したことですか？

あなたはCSSファイルが競合するディレクティブを持っており、彼らはアプリケーション内の各ページに同じ順序でロードされるべきであるとしていないことがわかっている場合は、は、実際には、1縮小さにそれらをバンドルする必要がありますCSSファイル。

しかしそれだけです。通常、このような状況では、どのCSSディレクティブがどの画面に適用されているかを特定することは非常に難しいです。

強調：あなたが直面している状況は、technical debtを示します。

Answer 3

27個のCSSファイルが完全にナットであり、理想的にはマージして縮小する必要があることに同意しますが、スタイルシートの分割が有効な場合があります。

これを考慮してください： サイトで使用されていない多数のCSSルールを必要とするサブサイトで作業しています。ユーザーがサブサイトとメインサイトの両方を訪問する（したがってキャッシングを利用する）という保証がない場合は、2つのスタイルシートを保持することが理にかなっているため、ブラウザは巨大なスタイルシートを読み取る必要がありませんHTML文書と一致するものがあれば。

これは一般的なケースではありませんが、それは起こります。一例は、大企業で、自分のサイトを細分化したものです。共有スタイル（企業固有のUIなど）ごとに1つのスタイルシートを含み、レイアウトや上書き用にスタイルシートを分割することもできます。

しかし、27のスタイルシートが理にかなっていると私は非常に疑っています。元の著者はおそらく手がかりを持っておらず、それがより構造化されていると考えました。モジュール化されたCSSは実際にはきれいですが、クライアントに到達する前に、常にマージして縮小する必要があります。これはSASSの一般的な作業方法です。サイトの特定の部分や機能には部分的なスタイルシートがたくさんありますが、Ctrl + Sを入力するとすぐに自動的に1つの小さなパッケージに統合されます。

ここでは、サイトのCSSファイルがロードされた順序を、各ページを訪れて注文に気づくだけでわかります。面倒な仕事であり、本当にそれが本当に報いるという保証はありませんが、それはできます。