web-dev-qa-db-ja.com

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

ページを作成しているときに、ページごとに個別のスタイルシートを作成しますか、それともサイト全体に1つの大きなスタイルシートを作成しますか?ロードの場合、個々のファイルは、ロード時のcssの合計が少ないため、より良い方法ではないでしょうか?

30
JCHASE11

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

助けるために、私は通常、CSSを CSSクリーナー で叩いてファイルサイズを小さくします。さらに、 Ghtipを使用した.htaccessを使用したCSS で、さらに小さくすることもできます。

最後に、すべてのCSSを1つのファイルに入れると、将来システム全体の表示を簡単に変更できるようになります(そもそもCSSを最初に使用する理由全体)。これにより、デバッグも簡単になります。

編集、2017年5月

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

47
Ben Everard

別の提案として、開発中に複数のスタイルシートを使用し、すべてのスタイルシートを1つのCSSファイルにマージして、本番環境にデプロイするメカニズムを用意します。これには、本番デプロイメントの前に実行するいくつかの追加のコーディングといくつかの追加のスクリプトが必要になる場合がありますが、開発用と本番用の両方に理想的です。プロセスが適切に自動化されていれば(達成するのはそれほど難しいことではありません)、これはいかなる種類のミスも引き起こしません。

8
Shailesh Kumar

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

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

4
dhornbein

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

1つのページでのみ使用されるスタイルシートは、別々のスタイルシートに入れることができます。これは、アクセス頻度の低いWebページ用の大きな単一ページのスタイルシートやスタイルシートに最も役立ちます。

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

4
DOK

「ロードの目的では、スタイルシートを小さくしたくないので、個別に作成することをお勧めします。」

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

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

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

2
Thomas

私は同じ質問を探しているこのスレッドに出くわしました。私の考えはこのように構成することでした。

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

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

または

homepage.css about.css gallery.css

1
Iamsamstimpson

私は実際には実際のWebプログラマー(JavaのWebプログラミングのものであり、PHPなどのスクリプトではありません)なので、実際にWebデザイナーが見たことがないという意見をお寄せください。 :

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

1
Esko