大規模サイト用のCSSの整理

Question

私はCSSとウェブサイトに関するより一般的なデザインに関する質問があります。私はできるだけコードを正規化し、重複を避けることがコンピュータ科学であることを知っています。だから少なくとも理論的には、ウェブサイトのスタイルシートを整理するときに同じことをするというのは、私には理由があります。

私が最も最近のウェブサイトを開始したとき、私はこの同じ哲学から始めました。私の最初のいくつかのページではうまくいきました。私はFirefoxでしかテストしていませんでしたが...

私のサイトが成長し、ページを追加したときに複数のレイアウト（およびブラウザ）が見つかりました。最終的に時間をかけて、私は次のようなアプローチに移動した：私は私のサイトの各マスターページのレイアウトのための非常に限られたトップレベルのCSSファイルを持っている

1. 、それはよく知られているレイアウト全体のスタイルだけでなく、CSSのクラスが含まれていますマスターページ用。

2. 私はページごとに特定のCSSスタイルを保持しています。

3. 私は、私は1つのページ上の変更が誤ったサイトの他のページを壊さないことを信頼できるように、このルートを取ることになった

組み込み可能なページ要素/コントロールの特定のCSSスタイルを保ちます多くの回帰バグで。

これに近づくと、他の人はどうしますか？これは良い/悪いアプローチです...私はこのアプローチに反対し、一部のページは非常に似ているので、重要な変更はより多くのCSSコードを変更することを意味すると私はまた、プロのものが日常的にこれを上回ると感じている。

他の開発者はこの哲学についてどう思いますか？良い？悪い？ちょうど好奇心が強い...

私には私の理想（私は非常にタイトなコードを保つようにしようとする）と、1ページの要件の変化の欲求不満との違いが、 divの幅を数ピクセル変更しました（たとえば、別のページで浮動小数点値を混乱させる）。あなたはあらゆる場所にあなたのCSSコードを複製している場合は、あなたの入力だけで、コードの他のタイプのような

Answer 1

ため

おかげで、あなたはトラブルを求めています。時間の経過とともにメンテナンスが難しくなります。

他のページに影響する1ページの変更に問題がないようにする最善の方法は、UIレイアウトとデザインを駆動するスタイルガイドを持つことです。あなたのスタイルガイドがHTMLおよびCSSクラスを定義して、指定されたデザインエレメントに使用すると、それらはすべてすべてのページで常に同じように表示されます。特定のページの要素を変更する必要がある場合は、別のクラスを使用するようにHTMLを変更し、そのクラスの新しいCSSを作成します（スタイルガイドに追加して再利用できます）。スタイルガイドでは、サイトで作業しているすべての開発者がHTMLを統一していることを確認することができます。

CSSで覚えておく必要があるもう一つのポイントは、ページで作成して参照するすべての.cssファイルがHTTP要求であることです。すべてのページとコントロールに独自のCSSファイルがある場合、1ページのリクエストごとにリクエストのダウンロード時間を延ばすことで、サイトのユーザーエクスペリエンスが大幅に低下します。また、ブラウザがキャッシュする可能性も低くなります。cssファイルにはスペースが限られているため、より多くの.cssファイルを埋め続けると、キャッシュからより速くダンプされます。はい、ハンドラで.cssファイルをプログラムで組み合わせることができるため、ページごとに1つのリクエストしか作成できませんが、サーバーのオーバーヘッドが増え、キャッシュ問題が残ります（サイト上のすべての.cssファイルとにかくここでやろうとしていることの目的を破っている）。