大きなウェブサイトをスタイリングするための一般的なパターン

Question

大きなウェブサイト用にCSSを設定、作成、保存する方法に共通するパターンはありますか？

私は自分自身で考え出した多くのものを試しました。

私はすべてのレイアウト（位置、サイズなど）を1つのファイルに入れてみましたが、レイアウトに影響を与えずにスタイルを簡単に交換できるので、別のものにすべての装飾（色、背景など）を入れました。これは、すべての要素が複数のファイルにスタイルされている場合、非常に退屈になります。

私は1つのメインCSSファイルを試してみました。そして、異なるルールを持つページは、それらのルールのための独自のCSSファイルを取得します。これにより、最終的に同じ「ユニークな」ルールを持つ他のページが作成され、常に重複したCSS（各ページには共有スタイルが何であるべきかを定義する独自のCSSファイルがあります）が発生します。

すべてのCSSブック、チュートリアル、またはこれまでに読んだことは、CSSが何をしているのか、そしてそれを単一ページまたは小さなサイトのコンテキストで使用する方法を説明しています。私はそれについてよく理解していますが、矛盾の多い大規模なウェブサイトのスタイルを立てる計画を立てる方法について議論することはありません。

私が従うパターン/共通の練習はありますか？

Answer 1

何私が通常行うことはこれです：

私は、例えば、容器に1つのCSSファイルを作成します個々のスタイル（div、img、リンクなど）用の別のファイル。

（容器付き）つまり、あなたのウェブサイトの輪郭、あなたのウェブサイトのコンテンツ（例えば、テキスト）はそれを埋め込みます。

スタイルを使用しているか、またはリストが表示されます。

私はこれを非常に良いマニュアルで病気を編集するのを助けてくれることを願っています。

PS。本は無料です。

Answer 2

Flickr、Facebook、Twitterなどのような大きなサイトをご覧ください。最高のことは（スピードの点で）、すべてを保存するために1つのCSSファイルを使用することです。異なるサイトごとに異なるルールの面で
は、「モジュラー」設計することも可能性がある -

.redFontColor { 
    color: #F00; 
} 

.smallFont { 
    font-family: "Courier New", "Times New Roman", serif; 
    font-size: .7em; 
} 

.alignedLeft { 
    text-align: left; 
} 

好きで、その

<div class="alignedLeft"> 
    This will be <span class="smallFont redFont">small and red</span> - but this text will just be <span class="redFont">red</span> 
</div> 

のようにHTMLでそれを使うのは非常に多くあります。このようなサイト;-)。

Answer 3

パフォーマンスには常に注意が必要です。 1つの大きなファイルを持つことは最適です。なぜなら、それは一度だけロードされ、その後キャッシュされることが可能で、他の外部リソースがロードされることができるからです。明らかに大きなファイルを作成しますが、コメントとインデントを使用すると、合理的な方法でグループ化することができます。

また、DEV環境でそれらを別々に保つことができ、展開の前にそれらをすべて1つのファイルに結合するビルド・メカニズムを考慮する必要があります。それは本当に両方の世界のベストを与える。

私が別々のCSSファイルのために見た唯一の本当の必要は、媒体（印刷、ページなど）のテーマ、アクセシビリティ、スタイルの違いです。

Answer 4

あなたは常に念頭に置いておく必要があります。

• Reusability
• DRY
• W3C Standards
• Cross-Browser Testing
• Performance

Answer 5

我々は最近、私私たちが「CSSコンパイル」と名付けたものを実装しました。これは、methodinが答えたようなものです。私たちのコンパイル（PHPバックエンドによって行われる）は、モジュールごとにコンパイルされた単一のCSSファイルを生成し、実行時に1つのCSSファイルがロードされます。これにより、パフォーマンスを心配することなく、必要なだけ多くのCSSファイルを定義できるようになりました。このために、プロジェクトの設定ファイル（例えば、ログイン、ホームなどのモジュール、すべてのモジュール用に読み込まれるCSSファイル）にmodule-CSSファイルのリレーションを含む配列$moduleCssrelationを定義しました。それがスタイル・アーキテクチャーの中核であるため、最終的に詳細を記述してください。

これは、我々が使用される基本的なCSSの計画である： - 詳細に研究

1. すべてのモジュールがスタイルパターン/再利用可能なコンポーネントを指摘し、
2. そのヘッダ部、フッターセクション、左側のメニューを見てすべてのモジュールに必要です。
   • 中央にいくつかのリストの表形式の表示セクションを持つモジュールがあります（共通ヘッダー、フッター、および左メニューを残しています）。ユーザーの詳細ページ、クラス詳細ページ。

3. デザイナーのチームによって1つのファイルにすべてのスタイルが配信されました。次に、前の手順で検討したスタイルパターンに従って、単一のCSSファイルを断片化しました。唯一の上場ページに表示されるコンポーネントのすべてのスタイル定義を含むヘッダ、フッタ、左側のメニュースタイル

4. listings.css を含む

5. common.css - だから、私たちは、のようないくつかのファイルを作成しました。

6. details.css 詳細ページの場合にのみ必要となる.detailsRedHeadingクラスがある場合は、thedomが言及したように、ここで定義します。

7. 余分なスタイル - 多くのモジュールがそのスタイルでポップアップを必要とするとしたら、そのスタイルをcommon.cssまたは他のファイルに定義するのではなく、popups.cssに入れます。私たちが望むように多くのCSSファイルを定義しなければならない自由を忘れないでください。後でテーマを容易にするため

は私がすべての装飾（色、背景ながら、1つのファイル内のすべてのレイアウト（位置、大きさなど）を入れて試してみた」のアイデアを適用したことがありません
を変更しますなど）を別のものに置き換えてください。しかし、それがあなたを助けてくれたら、あなたはこのアーキテクチャにそれを加えることができます。 common.cssをcommon_layout.cssに、common_design.cssに、そして他のものについても同様にします。

また、可能な限り最大限のスタイル再利用を行うようにしてください。このようにスタイル宣言を避ける： -

.listingsBody 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
    .. 
    some listing page styles 
    .. 
} 

.detailsBody 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
    .. 
    some details page styles 
    .. 
} 

が代わりにこれを持っている： -

.siteMediumFont 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
} 

.detailsBody 
{ 
    .. 
    some details page styles 
    .. 
} 

.listingsBody 
{ 
    .. 
    some listing page styles 
    .. 
} 

私は多くのデザイナーがこれを行うことを見てきました。より複雑な場合のこの習慣は、事態を後で本当に困難にする可能性があります。コンパイルの

詳細： -

我々はCSSの変更を適用し終わった後、私たちは以下のんのコンパイルコードを実行します -

$moduleCssrelation = array("class_details"=> array("details","popups")); 

配列$moduleCssrelationトラバースからのコンパイル済みのファイルを作成します各モジュールのcssファイル名の内容。例： class_detailsモジュールにファイルdetails.css,popups.cssが必要な場合はというファイルが作成され、class_detailsとこれら2つのcssファイルを必要とする他のモジュールにもロードされます。