単一の巨大な.cssファイルと複数の小さな特定の.cssファイル
ほとんどすべてのページで使用されるスタイル要素を含む単一のモンスター.cssファイルを持つことには利点がありますか？
管理を簡単にするために、さまざまな種類のCSSをいくつかのファイルに引き出して、メインの<link />にすべてのファイルを含めるのが悪いと思いますか？
私はこれが良いと思っています
- position.css
- buttons.css
- tables.css
- copy.css
vs.
- site.css
片方の方法ともう片方の方法で何か問題がありますか？
SassやLESSのようなCSSコンパイラーが最適な方法です。そうすれば、サイトに単一の最小化されたCSSファイル（通常の単一のCSSソースファイルよりもはるかに小さくて高速になります）を配信できます。
SassとLESSには、CSSの記述と保守を簡単にする変数、ネスト、その他の方法の利点があります。強くお勧めします。私は個人的にSass（SCSS構文）を使用していますが、以前はLESSを使用していました。両方とも素晴らしいもので、同様の利点があります。コンパイラを使用してCSSを作成した後は、CSSを使用せずにCSSを作成することはほとんどありません。
Rubyをいじりたくない場合は、次のMac用LESSコンパイラが最適です。
または、同じ人によるCodeKitを使用できます。
http://incident57.com/codekit/
WinLessは、LESSを操作するためのWindows GUIです。
これは答えるのが難しいものです。私の意見では、どちらのオプションにも長所と短所があります。
個人的には、1つの巨大なCSSファイルを読むのは好きではありません。それを維持するのは非常に困難です。一方、それを分割すると、余分なhttp要求が発生し、処理が遅くなる可能性があります。
私の意見は2つのうちの1つです。
1）CSSの作成後にCSSが変更されないことがわかっている場合は、開発段階で（読みやすくするために）複数のCSSファイルを作成し、公開する前に手動で結合します（httpリクエストを減らすため）
2）時々CSSを変更し、読みやすくする必要があることがわかっている場合は、個別のファイルを作成し、コードを使用して（何らかのプログラミング言語を使用している場合）、それらを結合します ランタイム ビルド時間（実行時の縮小/組み合わせはリソース豚です）。
どちらのオプションでも、httpリクエストをさらに減らすために、クライアント側でキャッシュすることを強くお勧めします。
編集：私はこれを見つけました ブログ これは、コード以外の何も使わずに実行時にCSSを組み合わせる方法を示しています。見る価値はあります（私はまだ自分でテストしていませんが）。
編集2：
設計時に別々のファイルを使用し、ビルドプロセスを縮小して結合することに決めました。このようにして、開発中に個別の（管理可能な）CSSを作成し、実行時に適切なモノリシック縮小ファイルを作成できます。また、実行時に圧縮/縮小を行っていないため、静的ファイルがあり、システムのオーバーヘッドが少なくなっています。
注：買い物客には、ビルドプロセスの一部として bundler を使用することを強くお勧めします。 IDE内からビルドする場合でも、ビルドスクリプトからビルドする場合でも、バンドラーは、付属のexeを介してWindowsで実行するか、node.jsを既に実行しているマシンで実行できます。
開発中は複数のCSSファイルを使用します。その方法で管理とデバッグがはるかに簡単になります。ただし、CSSファイルを1つのモノリシックファイルにマージする YUI Compressor のようなCSS縮小ツールを代わりに使用することをお勧めします。
CSSファイルが1つしかないほうが、HTTP要求が少なくなるため、ページの読み込み時間を短縮できます。
いくつかの小さなCSSファイルがあると、開発が容易になります（少なくとも、アプリケーションのモジュールごとに1つのCSSファイルを作成すると、作業が簡単になります）。
したがって、どちらの場合にも理由があります...
両方のアイデアを最大限に活用できるソリューションは次のとおりです。
- いくつかの小さなCSSファイルを使用して開発する
- つまり、開発が簡単です
- アプリケーションのビルドプロセスを作成するには、これらのファイルを1つに「結合」します
- そのビルドプロセスは、その大きなファイルを縮小することもできます、ところで
- これは明らかに、アプリケーションが「マルチファイルモード」から「モノファイルモード」に切り替えることができるいくつかの構成要素を持っている必要があることを意味します。
- 本番環境では、大きなファイルのみを使用します
- すなわち、より高速なページの読み込み
ビルド時ではなく、実行時にCSSファイルを結合するソフトウェアもあります。しかし、実行時にそれを行うことは、CPUをもう少し消費することを意味します（明らかに、大きなファイルを頻繁に再生成しないために、ある程度のキャッシュ機構が必要です）
あなたは両方の世界が欲しいです。
あなたの正気は無駄になる恐ろしいものなので、複数のCSSファイルが必要です。
同時に、単一の大きなファイルを持つことをお勧めします。
解決策は、複数のファイルを単一のファイルに結合するメカニズムを使用することです。
一例は次のようなものです
<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />
次に、allcss.phpスクリプトがファイルの連結と配信を処理します。
理想的には、スクリプトはすべてのファイルのmod日付をチェックし、ファイルのいずれかが変更された場合に新しいコンポジットを作成し、そのコンポジットを返し、その後、冗長CSSを送信しないようにIf-Modified HTTPヘッダーに対してチェックします。
これにより、両方の長所が得られます。 JSにも最適です。
モノリシックスタイルシートには多くの利点があります（他の回答で説明されています）が、スタイルシートドキュメントの全体的なサイズによっては、IEで問題が発生する可能性があります。 IEには、単一ファイルから読み取るセレクターの数に制限があります。制限は4096セレクターです。モノリシックスタイルシートにこれ以上のものがある場合は、分割することをお勧めします。この制限は、IEのheadい頭にすぎません。
これは、IEのすべてのバージョン用です。
Ross Bruniges Blog および MSDN AddRuleページ を参照してください。
複数のcssファイルがあると有益な転換点があります。
平均的なユーザーには5つしか表示されない可能性が高い1M +ページのサイトには、非常に大きな比率のスタイルシートが含まれている可能性があります。経済。
引数を極限まで引き伸ばします。これは、Web全体で1つの大きなスタイルシートを維持することを提案するようなものです。明らかに無意味です。
ただし、転換点はサイトごとに異なりますので、厳格なルールはありません。それは、ページあたりの一意のcssの量、ページ数、および平均的なユーザーがサイトの使用中に日常的に遭遇する可能性が高いページ数に依存します。
私は通常、いくつかのCSSファイルを持っています。
- リセットおよびグローバルスタイル用の「グローバル」CSSファイル
- 論理的にグループ化されたページの「モジュール」固有のcssファイル（チェックアウトウィザードのすべてのページなど）
- ページのオーバーライド用の「ページ」固有のcssファイル（または、これを個々のページのブロックに入れる）
CSSファイルに対する複数ページのリクエストにはあまり関心がありません。ほとんどの人には適切な帯域幅があり、すべてのスタイルを1つのモノリシックCSSファイルに結合するよりもはるかに大きな影響を与える他の最適化があると確信しています。トレードオフは速度と保守性の間であり、私は常に保守性に傾いています。 YUIコンプレッサーはかなりクールに聞こえますが、確認する必要があるかもしれません。
歴史的に、単一のCSSファイルを持つことの主な利点xの1つは、HTTP1.1を使用するときの速度の利点です。
ただし、2018年3月現在、80％以上のブラウザーがHTTP2をサポートしています。 HTTP2を使用すると、ブラウザーは複数のリソースを同時にダウンロードできるだけでなく、リソースをプリエンプティブにプッシュできます。すべてのページに単一のCSSファイルがあると、必要なファイルサイズよりも大きくなります。適切な設計では、コーディングが簡単である以外、これを行う利点はありません。
最高のパフォーマンスを得るためのHTTP2の理想的な設計は次のとおりです。-すべてのページで使用される共通のスタイルを含むコアCSSファイルを用意します。 -ページ固有のCSSを別のファイルに保存-待機時間を最小限に抑えるためにHTTP2プッシュCSSを使用（繰り返しプッシュを防ぐためにCookieを使用できます） -帯域幅モバイルデバイス）-将来のページ読み込みを高速化する場合は、ページの読み込み後にサイトまたは特定のページの残りのCSSを読み込むこともできます。
複数のCSSファイルが好きです。そうすることで、「スキン」を自由に交換できます。 1つのモノリシックファイルの問題は、制御不能になり、管理が困難になることです。青い背景が必要で、ボタンを変更したくない場合はどうしますか？背景ファイルを変更するだけです。等。
これが最良の方法です。
- すべての共有コードで一般的なcssファイルを作成します
- 特定のすべてのページのcssコードを同じページに挿入します。タグで、または各ページにstyle = ""属性を使用します
この方法では、すべての共有コードとhtmlページを含む1つのcssしかありません。ちなみに（これは正しいトピックではないことは知っていますが）、base64で画像をエンコードすることもできます（ただし、jsファイルとcssファイルでもエンコードできます）。この方法で、さらに多くのhttp要求を1に減らします。
SASSとLESSにより、これらすべてが本当に重要なポイントになります。開発者は、効果的なコンポーネントファイルをセットアップし、コンパイル時にそれらをすべて組み合わせることができます。 SASSでは、開発中に圧縮モードをオフにして読みやすくしたり、本番環境に戻すことができます。
http://sass-lang.comhttp://lesscss.org
最終的には、使用するテクニックに関係なく、単一の縮小されたCSSファイルが必要です。 CSSの削減、HTTPリクエストの削減、サーバーの需要の削減。
Jammit を使用してcssファイルを処理し、読みやすいようにさまざまなファイルを使用しています。 Jammitは、実稼働環境にデプロイする前にファイルを結合および圧縮するという汚い作業をすべて行いません。このようにして、開発中のファイルは多数ありますが、実稼働中のファイルは1つだけです。
単一のCSSファイルの利点は、転送効率です。各HTTP要求は、要求された各ファイルのHTTPヘッダー応答を意味し、帯域幅を消費します。
CSSをPHPファイルとして提供し、HTTPヘッダーに「text/css」MIMEタイプを指定します。このようにして、サーバー側に複数のCSSファイルを作成し、PHP includeを使用して、ユーザーの要求に応じてそれらを単一のファイルにプッシュできます。最新のブラウザはすべて、CSSコードを含む.phpファイルを受け取り、.cssファイルとして処理します。
パフォーマンスのために1つのcssファイルを使用し、次のようなセクションをコメントアウトできます。
/******** Header ************/
//some css here
/******* End Header *********/
/******** Footer ************/
//some css here
/******* End Footer *********/
等
CSS開発への体系的なアプローチを作成しました。このようにして、変わらない標準を利用できます。まず、960グリッドシステムから始めました。次に、基本的なレイアウト、マージン、パディング、フォント、およびサイズ用のCSSの単一行を作成しました。その後、必要に応じてそれらをつなぎ合わせます。これにより、すべてのプロジェクトで一貫したレイアウトを維持し、同じcssファイルを何度も利用できます。彼らは特定ではないからです。次に例を示します。---- div class = "c12 bg0 m10 p5 white fl"/div ---これは、コンテナの幅が12列であり、bg0を使用すると10pxのマージンがあることを意味します。左。これらすべての属性を持つ単一のクラスを作成する代わりに、新しい-「ライト」スタイルと呼ばれるものを削除または追加することで、これを簡単に変更できます。ページをコーディングするときに、単一のスタイルを単に組み合わせます。これにより、スタイルの任意の組み合わせを作成でき、私の創造性を制限したり、似たようなスタイルを大量に作成したりすることはありません。スタイルシートは管理しやすく、最小化され、何度も再利用できます。この方法は、迅速な設計に最適であることがわかりました。また、PSDで最初にデザインするのではなく、ブラウザーでデザインするため、時間も節約できます。さらに、背景とページデザイン属性の命名システムも作成しているため、新しいプロジェクトを作成するときに画像ファイルを変更するだけです（bg0 =命名システムに応じた本文の背景） 1つのプロジェクトの背景を単に黒に変更すると、次のプロジェクトではbg0が黒の背景または別の画像になります.....この方法にはまだ何も問題がなく、うまく機能しているようです。
バンドルされたスタイルシートを使用すると、ページの読み込みパフォーマンスが低下する場合がありますが、スタイルが多いほど、ブラウザが表示しているページのアニメーションのレンダリングが遅くなります。これは、使用しているページにはないかもしれないが、ブラウザがまだ計算しなければならない未使用のスタイルが大量にあるためです。
参照： 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">