大きなCSSメディアクエリファイルを画面サイズごとに個別のファイルに分割する必要がありますか？

私はレスポンシブデザインのWebサイトで、すべての画面サイズのコンテンツを配信しています。5つの異なる「ステップ」のメディアクエリがあり、CSSファイルは約30 KBです。

これを個別のファイルに分割し、これに似たものにする方が良いでしょうか？

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

または、1つのCSSファイルに保存する必要がありますか？

更新：私が追加したかったのは、私の主な関心事は、開発の容易さではなく、ブラウザ/デバイスのページを開く/レンダリングする速度です。

開発のために最も簡単だと思うものと、整然としたスタイルシートを維持するのに役立つものに本当に依存していると思います。

私が分割で考えることができる唯一の本当の欠点は、要素の属性がすべてのスタイルシートに表示される場合、それを変更するには5つの別々のファイルを更新する必要があるということです（一箇所に並んで表示されるのではなく）。

この投稿の回答によると、ブラウザはすべてのスタイルシートをダウンロードしますので、解像度の分割は帯域幅節約ではありません：https : //stackoverflow.com/questions/16657159/when-using-media-queries-does-a -phone-load-non-relevent-queries-and-images

それは達成したいものにわずかに依存します。ページの読み込みを速くしようとしていますか、それとも開発を簡単にしようとしていますか？

後者をターゲットにする場合、複数のシートを使用できますが、それはすべて好みの問題です。宣言したすべてのスタイルの概要がわかるので、1つの大きなファイルを使用するのが最も簡単です。

リクエストのオーバーヘッドは非常に大きいため、最善の方法よりも速い読み込みページが必要な場合は、リクエストの量を最小限にすることです。さらに、開発バージョンを自分用に保持し、最小化されたcssをWebに提供することもできます（YUIが良い方法であることがわかります：http : //www.refresh-sf.com/yui/）。

さらに、私はCSS自体を最適化しようとします。たとえば、次のように、非常に類似したクラスをマージすることができます。

.bold-and-italic { font-weight: bold; text-style: italic; }

以下に変換できます。

.bold { font-weight: bold; }
.italic { text-style: italic; }

唯一のことは、あなたから少しのhtmlを変更する必要がある<span class="bold-and-italic">foo bar</span>に<span class="bold italic">foo bar</span>

Bootstrap（http://getbootstrap.com）をご覧になることをお勧めしますが、これらの人はクラスを複数の「サブクラス」に分割するのに素晴らしい仕事をしました。

これがお役に立てば幸いです。

CSSファイルを1つだけにして、それを縮小してgzipするのがおそらく最善です。それを行う前に30KBを使用していると仮定すると、縮小（空白の削除）とgzipでファイルサイズを約5KBに減らすことができます。

分割することで、特定の条件下でのみ、さらに高速化できます。

• 毎回1つのスタイルシートのみがロードされるようにする必要があります-そうしないと、2つ以上のHTTPリクエストが必要になり、それら自体にオーバーヘッドがあり、ファイルサイズが小さいことによる利益を少なくとも部分的に無効にします。これを行うには、ないだけで、スタイルシートを分割し、複数の挿入するのに十分な<link>ブラウザがすべてロードするように見える、異なるメディア属性で-タグを<link>（この情報のため@cimmanonのおかげで、それを知らなかった）にかかわらず、メディアクエリのEDスタイルシートを。
• スタイルシート間で共有されるCSSルールの数は少なくなければなりません。さもないと、複数のスタイルシートのそれぞれにすべての共通ルールを含める必要があり、元のサイズとほぼ同じサイズになります。
• CSSプリプロセッサ（または同様のもの）を使用するため、5つのスタイルシートに同じコードを含めることが管理しやすいです。

また、時期尚早に最適化しないでください。パフォーマンスの問題がある場合にのみ行ってください。

CSSファイルはレンダリングをブロックするため、メディアクエリに基づいてCSSファイルを分割する必要があります。

ブラウザがDOMを構築しているとき、最初にすべてのCSSファイルを待機してロードする必要があります。一部のCSSファイルが特定のメディアクエリに基づいてのみ読み込まれる場合、ページの読み込み時間が短縮されます。

これは、JavaScriptスクリプトタグに非同期を追加する場合も同様です。例：<script src='myfile.js' async></script>。

DOMは、JSファイルがロードされるのを待つ必要はありません。DOMの構築にonloadでそのJavaScriptが必要ない場合にのみ、非同期を追加します。

私はこれを言いたいです。

本番環境では、常に1つのファイルに保管してください。その理由は、ブラウザにとってより効率的であり、開発から本番に移行する際の主な関心（IMO）であるべきだからです。

開発は別の魚のやかんです。Mediaクエリを分割して、どの要素でも実行できるようにします。たとえば：

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

通常、要素を変更する場合と同様に、CSSのあちこちを探し回る必要はありません（ただし、grepなどを使用できます）。

しかし、私が言いたいのは、サイト自体、開発プロセスなどを検討する価値があるということです。画面サイズベースのファイルに分割する価値があると本当に考えている場合は、試してみてください。サイトのコピーを作成し（可能な場合）、コピーを試してみます-簡単になったら、それを使用します。あなたは、ウェブサイトを開発する方法の万能のパラダイムに従う必要はありません。

シンプル：1つのスタイルシートを使用し、コメントを追加するだけで、CSSスタイルの検索と変更が簡単になります。例：

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

必要に応じて、複数のスタイルシートを使用して、特定のサイズごとに呼び出すことができます。

私はむしろBootstrapを見てみたい。すべてのCSSを含む1つのCSSファイルです。ほぼ99％のブラウザーで動作し、非常に応答性が高いです。

ライブデモをクリックしてズームイン（Ctrl +=ズームイン、Ctrl -=ズームアウト、Ctrl 0=ノーマル）するか、モバイルで開いてレンダリング方法を確認します。