未使用のCSSの問題に対処する方法

ブログでスピードテストを行っていますが、未使用のCSSについて常に不満を感じています。しかし、これは私が使用したことのないCSSではなく、その特定のページで使用されていないだけです。

今は構造化された方法で作業していますが、別のページで必要になるため、ファイルにはまだ使用されないCSSが必要です。

別のページで別のCSSファイルを使用するのが良い方法だとは思いませんが、キャッシュできる大きなファイルを1つ作成するだけの方がずっと良いと思います。

これに対処するためのエレガントな方法はありますか、それともこれに固執しますか？

より大きな1つのCSSファイルを使用する方がよいというあなたの主張は正しいです。gzipで圧縮すると数KBになる可能性が高く、キャッシュする必要があるため、大きなオーバーヘッドではありません。ただし、確認する必要がある点がいくつかあります。

一部のCSSが1つのページでのみ使用される場合、その場合は、一部のスタイルタグで、CSSをページに配置する方がよい場合があります。（注：これにより、特に後で他の場所で同様のスタイルを使用することを決定した場合に、保守が困難になる可能性があります。）

最も人気のあるページ（たとえば、ページビューの50％以上を構成するページ）で、これらのページで使用されているCSSがごくわずかであることがわかった場合、ユーザーがそれを分割する方が速い場合があります2つのCSSファイル。現在、最も人気のあるページにアクセスする新規ユーザーは、ダウンロードする必要がはるかに少ないです。他のページでは、1つの余分なHTTPリクエストがありますが、それは大きな問題ではありません。

CSSが適切に最適化されていることを確認してください。可能な場合は子孫セレクターを避けます。セレクタの右側が一般的すぎると、レンダリング時間が遅くなる可能性があります。たとえば.class div {}、ブラウザは<div>ページ上のすべての要素をチェックし、DOMツリーを最上部まで調べてクラスを持つ要素を見つける（または見つけない）必要があるため、少し時間がかかります。

これは、使用しているスピードテストツールの欠点であると思います。サイト全体を調べたり、まったく使用されていないCSSを確認したりすることはありません。機能するツールを見つけた場合は、お知らせください。

キャッシュできる大きなファイルを1つ作成するだけの方がはるかに良いと思います。

はい、それは理にかなっています。ただし、CSSの追加のビットが必要なページのセットがない場合は、それらにページを含めることができます。

Dust-Me Selectorsと呼ばれる便利な小さなFirefoxプラグインがあり、CSSをチェックして未使用のルールを報告します。ただし、最新バージョンのFirefox（v8.0）では動作しないため、少し残念です。

PS：もし私があなただったら、CSSリントを少々の塩で味わおうと思います。その "推奨事項"は徹底的で、とにかくやり過ぎだと言う学派があります。（詳細については、Matt Wilcoxの説得力のある記事「CSS Lintは有害です」を参照してください）。せいぜい、それは完全に非公式です…そしてそれに直面しましょう、満たすために本当に別のツール/疑似標準が本当に必要ですか？

これを処理するために私が想像できる最も最適化されたスケーラブルな方法は、次のもので構成されています。

1. 作るメインCSSファイル（例えば、サイトのデザイン、グローバルクラス、ライブラリ、プラグイン、などなど...）「グローバルスコープ」に至るまでの相対のために。

2. ページごとに1つの固有のCSSファイルを含むフォルダーを含むシステムを作成します（必要な場合のみ）。これらのファイルには、リンク先のページと同じファイル名を付けることができるため、そのフォルダーでCSSファイルを検索するサーバー側スクリプトを実行して、ページがある場合はそれをページに追加できます。

3. たぶん、訪問者が相対的なブラウザを持っている場合にのみロードするブラウザ固有のもののために異なるCSSファイルを作成します。

そうすることで、CSSを分離する確実で最適化された方法になります。ええ、メインファイルにはまだ未使用のルールがありますが、論理的な観点では本来あるべき場所です。

また、CSSファイルのこれら3つの「レイヤー」は、単一のCSSファイルと同じようにキャッシュされることにも注意してください。