web-dev-qa-db-ja.com

大きな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ファイルに保存する必要がありますか？

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

cssresponsive-webdesigncss3media-queries
19
CamSpy

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

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

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

16
Richard B

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

後者をターゲットにした場合、複数のシートを使用できますが、それはすべて好みの問題です。宣言したすべてのスタイルの概要が表示されるため、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 ）をご覧になることをお勧めしますが、これらの人々はクラスを複数の「サブ-クラス'。

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

4
royarisse

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

分割することでおそらくいくつかの高速化が得られますが、それは特定の条件下でのみです。

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

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

4
Jost

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

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

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

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

3
jsninja

私はこれを言う傾向があります。

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

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

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

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

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

2
Algy Taylor

シンプル：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

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

1
Regardt Ogies Myburgh