各ページに1つのCSSファイルまたは個々のCSSファイル？

Question

ページを構築するとき、各ページに個別のスタイルシートを使用しますか、サイト全体に1つの大きなスタイルシートを使用しますか？読み込みの目的では、個々のファイルは読み込み時の総CSSが少なくなるため、より良い方法ではありませんか？

Answer 1

単一のファイルを使用すると、CSSファイルがキャッシュされるため、新しいページにアクセスするたびに新しいファイルをダウンロードする必要が少なくなります。

支援するために、通常、CSSを CSSクリーナーで叩いてファイルサイズを小さくします。 .htaccess を使用してCSSをGZipし、さらに小さくします。

最後にすべてのCSSを単一のファイルに入れると、システム全体のプレゼンテーションの変更が将来簡単になります（最初にCSSを使用する全体の理由）。また、デバッグも簡単になります。

編集、2017年5月

7年以上で大きな変化があります。この回答を見る人は、特にHTTP2とプリプロセッサの使用がより一般的になっているため、新しいアセット配信方法の研究を検討する必要があります。

Answer 2

別の提案。開発中に複数のスタイルシートを使用し、すべてのスタイルシートを単一のCSSファイルに統合して運用展開するメカニズムを備えています。これには、プロダクションデプロイメントの前に、多少の余分なコーディングといくつかの余分なスクリプトを実行する必要がありますが、開発用とプロダクション用の両方に最適です。プロセスが適切に自動化されている場合（達成することはそれほど難しくありません）、これはどんな種類の間違いも引き起こしません。

Answer 3

スタイルシートの主な目的は、すべてのページでデザインを変更できるようにすることです。各ページにh1 {color:red;}があり、後でそれを青に変更する場合は、各ページのスタイルシートを編集する必要があります。 1つのスタイルシートを使用して、色を変更し、サイト全体に反映させることができます。

さらに、スタイルシートは各ページからダウンロードされるのではなく、ユーザーのコンピューターにキャッシュされます。

Answer 4

Webサイトのすべてのページで一貫したスタイルを使用する場合は、すべての共通スタイルに1つのスタイルシートを使用します。そうしないと、多くのスタイルシートを維持することが非常に困難になる場合があります。複数のスタイルシートのすべてに変更を追加する必要があります。

単一のページでのみ使用されるスタイルシートは、個別のスタイルシートに入れることができます。これは、大きな単一ページのスタイルシートおよび/またはアクセス頻度の低いWebページのスタイルシートに最も役立つ可能性があります。

ページを更新するたびにスタイルシートが再ロードされることはありません。ホームページで大きな汎用スタイルシートを参照する場合、一度だけダウンロードされ、将来の使用のためにキャッシュされます。

Answer 5

<！> quot;読み込みの目的で、小さなスタイルシートが必要ではないので、個々のスタイルシートを作成することをお勧めしますか？<！> quot;

1つのスタイルシートを使用してキャッシュし、簡単に再ロードできる一方で、メソッドを使用して各ページの新しいCSSファイルを常にロードしているため、これは逆の効果があります。

ほとんどのサイトでは、1種類のメディアに対して複数のスタイルシートを用意する必要はありません。ただし、サイトのデザインが大幅に異なる場合は、すべての共通プロパティを含むベーススタイルシートを作成し、次に各ページの違いを含むセカンダリスタイルシートを作成することをお勧めします。

これは、CSSの変更が個別のスタイルシートの使用を保証するのに十分な大きさである場合にのみ使用する必要があります。

Answer 6

私は実際には実際のWebプログラマーなので（PHPのようなスクリプトではなく、JavaのWebプログラミング）、実際のWeb デザイナーが見たことのない意見をお伝えしなければなりません：

CSSファイルを可能な限り複数の論理パーティションに分割してください！非常に様式化されたテーブルがある場合、CSSを1つのファイルに収集し、実際のページの基本スタイルを別のファイルに収集し、それらのメニューナビゲーションCSS：sを3番目のファイルに追加します。もちろん、関連する個々のCSS：を再利用できますが、すべてを1つの大きなファイルに詰め込むだけではしない！

Answer 7

同じ質問を求めてこのスレッドに出くわしました。私の考えは、このような構造になりました。

Layout.css <！> lt; ---サイトの構造、リンク、見出しなど、サイト全体で共通です。 form.css <！> lt;-汎用フォームスタイル reset.css <！> lt;-使用するとすべてのドキュメントがリセットされます

現在、すべてのページスタイルにpages.cssを使用しています。

または

homepage.css about.css gallery.css