2012-06-15 6 views
6

私は複数のCSSファイルの管理を避けて、の1つのプロジェクトに1つずつ従うべきであるということは、先進的なWeb開発者(以前はいつですか?それは、ページの読み込み速度を向上させ、たくさんの重複するCSSルールを扱うときの愚かな間違いを避けるのに役立ちました。まだすべてのCSSを1つのファイルに保存する必要がありますか?

私の質問ですが、このアプローチはまだ有効ですか?

最近の素晴らしいブロードバンドインターネットと巧みなキャッシング機能を備えた巧妙なウェブブラウザでは、ページの読み込み性能に関する議論はあまり進んでいないようです。 CSSカスケーディングは実際にはエラーを起こす可能性がありますが、経験の浅い開発者向けで、CSSスタイルシートを1つしか持たないということは、

私は、デフォルトのスタイルシートをコンポーネントごとにきちんと分けて、CSS @importで1つのルールにまとめておくことをお勧めしたいと思います。これにより、デフォルトでリセットスタイルシートを含めることもできます。

誰もが私と一緒ですか?

+1

答えはSASS/LESSです。モジュールで開発し、キャッシュ可能なCSSファイルを1つ使用して生産的に使用する。これを完全に自動化しました。 – Christoph

答えて

6

これは帯域幅の速度ではなくHTTP要求の数であり、これはモバイル接続には非常に意味があります。

しかし、プロジェクトのモジュラー化を維持するためのさまざまなCSSファイルを使用するアプローチは固いものです。これは、すべてのコードを1つのファイルにまとめることなく、必要な方法でCSSを整理するのに役立ちます。次に、cssプリプロセッサ/ minifierを利用して、すべてのcssファイルを1つのプロダクション用に連結して圧縮することができます。

この記事http://www.igvita.com/2012/06/14/debunking-responsive-css-performance-myths/

が、これは良い習慣である理由も説明してモバイルについての段落を持っています

あなたは、初期の上で1つのショットでのCSSのすべてのコンテンツをダウンロードするオフはるかに優れていますウォームアップ接続。そうすることで、ユーザーはバッテリーの寿命を延ばすことができます。ここで1つの最適化が行われる場合、単純に:連結して圧縮します。

+1

私は、別のHTTPリクエストの数も重要なサーバー側であると付け加えます。たとえば、彼の標準構成のApacheは、新しい要求ごとにスレッドを作成します。 – maxdec

+0

モバイル!良いヒント、私はその議論を完全に逃したと思う。 –

+0

良いコール@倍、+1 – Luca

0

私はあなたに同意します、私はもう1つだけのCSSシートを残す理由はない、最近、私はあなたがちょうど述べたことを行います、コンポーネントによって分離、遅延読み込み:)(PHP文など)。

1

はい、その方法はまだ有効です。そこ負荷最適化に関する記事の数十はそこにあるが、サーバ=優れたロード・パフォーマンスに作ら

少ないファイル=以下のHTTPリクエストを次のように一般的な考え方はある

時間の経過とともに変化し

主な事があります実行時に複数のファイルを1つにマージすることをサポートする多くのツールがあります。開発時には、より良い編成やデバッグのためにスタイルシートを分けています。これらのツールは、生産時に正しいキャッシュヘッダーをマージ、縮小、および設定します。

関連する問題