6

CSSを1つのファイルに結合することになっていることは誰もが知っていますが、サイトごとまたはページごとですか?私は両方の長所と短所を見つけました。

シナリオは次のとおりです。

  • 大規模サイト
  • CSSファイルはグローバルスタイル用に1つのファイルに分割され、モジュール用に多数に分割されます

解決策A:サイト全体のすべてのCSSファイルを1つのファイルに結合します。

最良の部分は、最初のヒット後に1つのファイルがすべてのページにキャッシュされることです。欠点は、名前空間の衝突の可能性が高くなるにつれて、セレクター(クラスとID)の命名規則がより重要になることです。また、同じモジュールを別々のページで異なるスタイルにするためのシステムも必要です。これにより、CSSに追加のセレクターが作成され、ブラウザーにとってより多くの作業が必要になります。これにより、メモリと処理能力がそれほど多くないiPadなどのモバイルデバイスで問題が発生する可能性があります。レスポンシブデザインにメディアクエリを使用している場合、追加のスタイルを追加すると、さらに問題が複雑になります。

解決策B:ページテンプレートごとに1つのCSSファイルを結合します。

(ページテンプレートとは、1つのレイアウトを意味しますが、記事ページのように多くの異なるページを意味します)このシナリオでは、上記の選択に関する問題のほとんどが失われますが、キャッシュの利点の一部も失われます。この手法の最悪の部分は、2つの異なるページテンプレートに同じスタイルがある場合、ページごとに1回ずつ、2回ダウンロードされることです。たとえば、これはすべてのグローバルファイルで発生します。:(

概要:

したがって、プログラミングで一般的であるように、どちらの解決策も完璧ではありませんが、誰かがこれに遭遇して答えを見つけた場合は、それを聞いてみたいです!特に、ソリューションAのセレクターの問題に役立つテクニックを知っている場合。

4

2 に答える 2

1

もちろん、サイトテンプレート、タイポグラフィ、フォームなど、すべてのグローバルスタイルを組み合わせて縮小します。また、最も重要で最も頻繁に使用されるモジュールスタイルをグローバルスタイルシートに組み合わせることも検討します。ホームページまたはエントリポイント。

解決策Bは適切ではありません。最後のページのキャッシュからコンテンツの一部をロードできた場合、ユーザーは一意のレイアウト/ページごとに同じコンテンツをダウンロードすることになります。この方法には何の利点もありません。

残りの部分については、それらを別々に(そして縮小して)残し、必要に応じて個別にロードします。Yahoo!で説明されているプリロード手法のいずれかを使用できます。ユーザーのキャッシュを事前にロードするための開発者ネットワークの「Webサイトを高速化するためのベストプラクティス」ガイド:

コンポーネントのプリロード

コンポーネントをプリロードすることで、ブラウザがアイドル状態の時間を利用して、将来必要になるコンポーネント(画像、スタイル、スクリプトなど)を要求できます。このように、ユーザーが次のページにアクセスしたときに、ほとんどのコンポーネントが既にキャッシュにある可能性があり、ユーザーにとってページの読み込みがはるかに速くなります。実際には、いくつかのタイプのプリロードがあります。

  • 無条件のプリロード-onloadが起動するとすぐに、先に進んでいくつかの追加コンポーネントをフェッチします。スプライト画像がオンロードでリクエストされる方法の例については、google.comを確認してください。このスプライト画像は、google.comホームページでは必要ありませんが、連続検索結果ページでは必要です。

  • 条件付きプリロード-ユーザーアクションに基づいて、ユーザーが次に向かう場所を知識に基づいて推測し、それに応じてプリロードします。search.yahoo.comで、入力ボックスに入力を開始した後、いくつかの追加コンポーネントがどのように要求されるかを確認できます。

競合するセレクターに関する限り、すべてのファイルを組み合わせて他の方法で実行しても違いはありません。これは設計上の問題です。blog-header可能であれば、またはなど、モジュールに固有のクラスに共通のプレフィックスを使用するなどして、すべてのモジュールに何らかの方法で「名前空間」を設定しますstorefront-title「オブジェクト指向CSS」と呼ばれる概念があり、冗長なCSSやモジュール固有のクラス名の必要性を減らすことができますが、これは通常、既存のプロジェクトに「追加」できるものではなく、設計段階で行われます。 。

HTTPリクエストは少ない方が良いですが、ファイルサイズだけでなく、ユーザーの動作やアクティビティも考慮する必要があります。エントリーページの最初のダウンロード時間は最も重要なことなので、後でまで使用しないものでそれを行き詰まらせたくはありません。本当に数値を計算したい場合は、いくつかの異なることを試して、FirebugまたはChromeの開発者ツールを使用してサイトのプロファイルを作成してください。

于 2012-07-17T02:32:48.607 に答える
0

すべてのテンプレートを必要とするスタイルを格納するglobal.cssを作成できると思います。

そして、各テンプレートでcssを作成できます。

または、 lescssのようなcssフレームワークを使用するだけです

于 2012-07-17T02:51:40.777 に答える