html - モジュラー CSS のテクニック

Question

モジュラー CSS の使用を開始したいのですが、それを実装する最良の方法を見つけるのに苦労しています。HTMLに1つあり、各モジュールに@importステートメントがあるブリッジ技術を使用できると思っていました。この方法の単純さは気に入っていますが、@import されたスタイルシートは後でダウンロードされ、必ずしも並行してダウンロードされるとは限らないため、パフォーマンスへの悪影響が懸念されます。そこで、モジュラー CSS を実装するための一般的な手法が他にあるかどうかを知りたいと思います。PageSpeed と Yslow は非常に多くのスタイルシートに不満を持っているため (実際には @import よりも効率的であることはわかっていますが)、複数のタグを作成したくはありません。理想的には、スタイルシートをサーバー上で 1 つに結合したいので、ブラウザーは毎回 1 つのスタイルシートのみを要求します。

Answer 1

ここでは、サーバー サイド インクルードを使用して「モジュール」をサーバー サイドの 1 つのスタイル シートにアセンブルすることを強くお勧めします。サーバー上にある種のキャッシュを持っているので、リクエストごとにアセンブリを行う必要はありません。これに利用できる技術はたくさんありますが、あなたのメッセージにはソフトウェア スタックについては何も含まれていません。

Answer 2

Compass CSS フレームワークを確認してください。ミックスインを介してモジュラー CSS をサポートし、変数、算術演算、およびBlueprintなどのスタイル フレームワークを追加することで、CSS を一般的により快適に操作できるようにします。

Answer 3

これを行う方法には細心の注意を払ってください。キャッシュはあなたの味方です。目的に合わせて配信され、サーバー側で生成された CSS ページを配信することを選択すると、キャッシュの利点が失われます。古典的な鶏が先か卵が先かという問題です。すべての CSS をプリロードしてキャッシュし、ヒットを前もって取得しますか?それとも、各ページをカスタム ロードして、ページを変更するたびにヒットを発生させますか? 何が最善かはあなただけが知っています。

これに乗り過ぎないでください。私は巨大なショップで働きましたが、小さな縮小化の変更で 1 日あたり 5 ギガの改善 (数百万のユニークなもの) が得られました。時間に余裕があるなら、夢中になってください。それ以外の場合は、必要に応じて回答を配分してください。これらのオプティマイザーは理想的な条件を報告しますが、実際にはそうではないことは誰もが知っています. いくつかの主要なサイトでオプティマイザーを実行してみてください (検証もお忘れなく)。