1つの巨大な.cssファイルと複数の小さな特定の.cssファイル [閉まっている]

ほとんどすべてのページで使用されるスタイル要素を含む単一のモンスター.cssファイルを使用することには利点がありますか？

管理を簡単にするために、さまざまな種類のCSSをいくつかのファイルに引き出し、メインのすべてのファイルを含めるの<link />は悪いことだと思います。

これが良いと思います

1. Positions.css
2. buttons.css
3. tables.css
4. copy.css

対

1. site.css

片方の方法と他の方法でそれを行うことの落とし穴を見たことはありますか？

SassやLESSなどのCSSコンパイラは、最適な方法です。そうすることで、サイトの単一の最小化されたCSSファイル（通常の単一のCSSソースファイルよりもはるかに小さくて高速になります）を配信しながら、すべてがコンポーネントにきちんと分割された、最高の開発環境を維持できます。

SassとLESSには、CSSの作成と保守を容易にする変数、ネスト、その他の方法の利点があります。強く、強くお勧めします。今は個人的にSass（SCSS構文）を使用していますが、以前はLESSを使用していました。どちらも素晴らしいですが、同じような利点があります。コンパイラーを使用してCSSを作成した後は、CSSを使用せずにCSSを作成することはほとんどありません。

http://lesscss.org

http://sass-lang.com

Rubyをいじりたくない場合は、このMac用LESSコンパイラが最適です。

http://incident57.com/less/

または、CodeKitを（同じ人が）使用することもできます。

http://incident57.com/codekit/

WinLessは、LESSをコンパイルするためのWindows GUIです。

http://winless.org/

これは答えるのが難しいものです。私の意見では、どちらのオプションにも長所と短所があります。

個人的には、1つの巨大なCSSファイルを読むのは好きではありません。それを維持することは非常に困難です。一方、分割すると余分なhttpリクエストが発生し、処理が遅くなる可能性があります。

私の意見は2つのうちの1つでしょう。

1）一度作成したCSSは決して変更されないことがわかっている場合は、開発段階で複数のCSSファイルを作成して（読みやすくするため）、手動で結合してから（httpリクエストを減らすため）

2）CSSをたまに変更する予定で、それを読みやすくする必要があることがわかっている場合は、個別のファイルを作成し、コード（ある種のプログラミング言語を使用している場合）を使用してそれらを結合しますランタイムビルド時間（ランタイムミニファイ/コンビネーションはリソースピッグです）。

どちらのオプションでも、http要求をさらに減らすために、クライアント側でのキャッシュを強くお勧めします。

編集：
私はこのブログを見つけました。実行時にコードを使用してCSSを組み合わせる方法を示しています。（私自身はまだテストしていませんが）見てみる価値があります。

編集2：
私は、設計時に個別のファイルを使用し、ビルドプロセスを縮小して結合することに決めました。このようにして、実行時に個別の（管理可能な）CSSを作成し、実行時に適切なモノリシックな縮小ファイルを作成できます。また、実行時に圧縮/縮小を行わないため、静的ファイルが残り、システムのオーバーヘッドが少なくなります。

注：買い物をする人のために、ビルドプロセスの一部としてバンドラーを使用することを強くお勧めします。IDE内からビルドする場合でも、ビルドスクリプトからビルドするexe場合でも、バンドルはWindowsのインクルードを介して実行するか、すでにnode.jsを実行している任意のマシンで実行できます。

開発中は複数のCSSファイルを使用します。そうすれば、管理とデバッグがはるかに簡単になります。ただし、展開の際には、CSSファイルを1つのモノリシックファイルにマージするYUI CompressorなどのCSS縮小ツールを使用することをお勧めします。

あなたは両方の世界を望んでいます。

あなたの正気は無駄にしてはひどいものなので、複数のCSSファイルが必要です。

同時に、1つの大きなファイルを用意することをお勧めします。

解決策は、複数のファイルを1つのファイルに結合するメカニズムを用意することです。

一例は次のようなものです

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

次に、allcss.phpスクリプトがファイルの連結と配信を処理します。

理想的には、スクリプトはすべてのファイルのmod日付をチェックし、それらのいずれかが変更された場合は新しいコンポジットを作成し、そのコンポジットを返し、If-Modified HTTPヘッダーに対してチェックして、冗長なCSSを送信しないようにします。

これにより、両方の長所が得られます。JSにも最適です。

CSSファイルが1つだけの場合は、HTTPリクエストが少なくなるため、ページの読み込み時間に適しています。

いくつかの小さなCSSファイルがあると、開発が簡単になります（少なくとも、アプリケーションのモジュールごとに1つのCSSファイルがあると、物事が簡単になります）。

したがって、どちらの場合にも正当な理由があります...

両方のアイデアを最大限に活用できるソリューションは次のとおりです。

• 複数の小さなCSSファイルを使用して開発するには
  • つまり、開発が容易
• アプリケーションのビルドプロセスを作成するには、これらのファイルを1つに「結合」します
  • そのビルドプロセスでは、大きなファイルを縮小することもできます。
  • それは明らかにあなたのアプリケーションが「マルチファイルモード」から「モノファイルモード」に切り替わることを可能にするいくつかの設定項目を持たなければならないことを意味します。
• 本番環境で使用するのは、大きなファイルのみ
  • つまり、より高速なページの読み込み

ビルド時ではなく実行時にCSSファイルの結合を行うソフトウェアもあります。しかし、実行時にそれを行うと、少し多くのCPU を消費することになります（そして、大きなファイルを頻繁に再生成しないようにするには、キャッシングのメカニズムが必要になります）。

歴史的に、単一のCSSファイルを持つことの主な利点の1つは、HTTP1.1を使用するときの速度の利点です。

ただし、2018年3月の時点で、ブラウザの80％以上がHTTP2をサポートしています。これにより、ブラウザは複数のリソースを同時にダウンロードできるほか、リソースをプリエンプティブにプッシュできます。すべてのページに単一のCSSファイルを使用すると、必要なファイルサイズよりも大きくなります。適切に設計されていれば、コーディングが容易であることを除けば、これを行う利点はありません。

最高のパフォーマンスを得るためのHTTP2の理想的な設計は次のとおりです。

• すべてのページで使用される共通のスタイルを含むコアCSSファイルを用意します。
• 別のファイルにページ固有のCSSを含める
• HTTP2プッシュCSSを使用して待機時間を最小限に抑える（Cookieを使用してプッシュの繰り返しを防ぐことができます）
• オプションで、フォールドCSSの上で分離し、これを最初にプッシュし、残りのCSSを後でロードします（低帯域幅のモバイルデバイスに役立ちます）
• 今後のページの読み込みを高速化したい場合は、ページの読み込み後にサイトまたは特定のページの残りのCSSを読み込むこともできます。

モノリシックスタイルシートには多くの利点がありますが（他の回答で説明されています）、IEで問題が発生する可能性のあるスタイルシートドキュメントの全体的なサイズによって異なります。IEは、単一のファイルから読み取るセレクターの数に制限があります。制限は4096セレクターです。モノリシックスタイルシートの場合は、これより多くのスタイルシートを分割する必要があります。この制限は、IEの醜い頭を後押しするだけです。

これは、IEのすべてのバージョンに対応しています。

参照ロスBrunigesブログやMSDN追加ルールのページを。

複数のcssファイルを用意することが有益である転換点があります。

100万以上のページがあり、平均的なユーザーが5と表示する可能性が高いサイトには、非常に大きな割合のスタイルシートがある可能性があるため、大量の初期ダウンロードを行うことにより、ページの読み込みごとに1つの追加リクエストのオーバーヘッドを節約しようとするのは誤りです。経済。

議論を極限まで引き伸ばす-それは、Web全体で1つの大きなスタイルシートを維持する必要があることを示唆するようなものです。明らかに無意味です。

転換点はサイトごとに異なりますので、厳密な規則はありません。これは、ページあたりの固有のCSSの数、ページ数、および平均的なユーザーがサイトを使用しているときに日常的に遭遇する可能性が高いページ数に依存します。

私は通常、CSSファイルをいくつか持っています。

• リセットおよびグローバルスタイル用の「グローバル」CSSファイル
• 論理的にグループ化されたページの「モジュール」固有のcssファイル（チェックアウトウィザードなどのすべてのページ）
• ページのオーバーライド用の「ページ」固有のcssファイル（または、これを個々のページのブロックに配置します）

CSSファイルに対する複数のページリクエストにはあまり関心がありません。ほとんどの人はまともな帯域幅を持っており、すべてのスタイルを1つのモノリシックCSSファイルに結合するよりもはるかに大きな影響を与える他の最適化があると確信しています。スピードと保守性の間のトレードオフであり、私は常に保守性に傾倒しています。YUI comperssorはかなりクールに聞こえますが、チェックする必要があるかもしれません。

私は複数のCSSファイルを好みます。そうすれば、「スキン」を好きなように入れ替えたり、入れ替えたりするのが簡単になります。1つのモノリシックファイルの問題は、制御不能になり、管理が困難になる可能性があることです。青い背景が必要で、ボタンを変更したくない場合はどうすればよいですか？背景ファイルを変更するだけです。等。

多分、オープンソースのCSSオーサリングフレームワークであるcompassを見てください。それはSassに基づいているので、変数、ネスト、ミックスイン、インポートなどのクールなものをサポートします。特にインポートは、CSSファイルを別々に分離しておきながら、自動的に1つにまとめたい場合に役立ちます（複数の遅いHTTP呼び出しを回避します）。Compassは、クロスブラウザのものを処理するのが簡単な事前定義されたミックスインの大きなセットをこれに追加します。Rubyで記述されていますが、どのシステムでも簡単に使用できます。

ここが最善の方法です：

1. すべての共有コードを含む一般的なcssファイルを作成する
2. 特定のページのCSSコードをすべて同じページに挿入するか、タグごとに、または各ページにstyle = ""属性を使用します

この方法では、すべての共有コードとhtmlページを含むCSSが1つだけあります。ちなみに（これは適切なトピックではないことはわかっています）、base64で画像をエンコードすることもできます（ただし、jsファイルやcssファイルを使用して行うこともできます）。このようにして、さらに多くのhttpリクエストを1に減らします。

SASSとLESSは、これらすべてを本当に重要なポイントにしています。開発者は効果的なコンポーネントファイルを設定し、コンパイル時にそれらすべてを組み合わせることができます。SASSでは、開発中に圧縮モードをオフに切り替えて読みやすくしたり、オンに切り替えて本番環境に戻すことができます。

http://sass-lang.com http://lesscss.org

結局のところ、使用する手法に関係なく、1つの縮小されたCSSファイルが必要です。CSS、HTTPリクエスト、サーバーへの要求が少なくなります。

単一のCSSファイルの利点は、転送効率です。各HTTP要求は、要求された各ファイルのHTTPヘッダー応答を意味し、帯域幅を消費します。

CSSを、HTTPヘッダーに「text / css」MIMEタイプを含むPHPファイルとして提供します。このようにして、サーバー側に複数のCSSファイルを作成し、ユーザーの要求に応じてPHPインクルードを使用してそれらを1つのファイルにプッシュできます。最近のすべてのブラウザは、CSSコードを含む.phpファイルを受け取り、それを.cssファイルとして処理します。

パフォーマンスのために1つのcssファイルを使用し、次のようなセクションをコメント化できます。

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

等

Jammitを使用してcssファイルを処理し、読みやすくするためにさまざまなファイルを使用しています。Jammitは、本番環境にデプロイする前に、ファイルを結合して圧縮するという面倒な作業をすべて行いません。このようにして、開発中のファイルは多数ありますが、運用中のファイルは1つだけです。

バンドルされたスタイルシートを使用すると、ページの読み込みパフォーマンスが低下する可能性がありますが、スタイルが多いほど、現在のページでブラウザがアニメーションをレンダリングする速度が遅くなります。これは、使用しているページにない可能性がある大量の未使用のスタイルが原因で発生しますが、ブラウザーはまだ計算する必要があります。

参照：https : //benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

バンドルされたスタイルシートの利点： -ページ読み込みパフォーマンス

バンドルされたスタイルシートの欠点： -動作が遅いため、スクロール、対話性、アニメーション中に途切れが発生する可能性があります。

結論： 両方の問題を解決するための理想的なソリューションは、すべてのCSSを1つのファイルにバンドルしてHTTPリクエストを保存することですが、JavaScriptを使用してそのファイルから、現在のページのCSSを抽出し、それを使用してヘッドを更新することです。

ページごとに必要な共有コンポーネントを把握し、複雑さを軽減するには、この特定のページが使用するすべてのコンポーネントを宣言しておくと便利です。たとえば、次のようになります。

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

CSS開発への体系的なアプローチを作成しました。このようにして、決して変わらない標準を利用できます。まず、960グリッドシステムから始めました。次に、基本的なレイアウト、マージン、パディング、フォント、サイズのcssを1行作成しました。その後、必要に応じてそれらを一緒に紐でつなぎます。これにより、すべてのプロジェクトで一貫したレイアウトを維持し、同じcssファイルを何度も利用できます。特定ではないからです。次に例を示します。---- div class = "c12 bg0 m10 p5 white fl" / div ---これは、コンテナが12カラム幅であり、bg0を利用して10pxの余白が5あることを意味し、テキストは白でフローティングします左。これを削除または追加することで、これを簡単に変更できます。これらの属性を持つ単一のクラスを作成する代わりに、「ライト」スタイルと呼んでいます。ページをコーディングするときに、単一のスタイルを組み合わせるだけです。これにより、スタイルの任意の組み合わせを作成でき、私の創造性を制限したり、類似したスタイルを大量に作成したりすることはありません。スタイルシートが管理しやすくなり、最小化され、何度でも再利用できるようになります。この方法は、迅速な設計に最適です。また、PSDで最初にデザインするのではなく、ブラウザで時間を節約することもできます。さらに、背景とページデザインの属性の名前付けシステムも作成したので、新しいプロジェクトを作成するときに画像ファイルを変更するだけです（bg0 =名前付けシステムに応じた本文の背景）。 1つのプロジェクトの背景を黒に変更するだけで、次のプロジェクトではbg0が黒の背景または別の画像になります。