7

このcssファイル（特に最後の5行）を見てください：

#page section .s_1 { overflow:hidden; width:435px; float:left;}
#page section .s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;}
#page section .s_1 menu { list-style:none;padding:0; margin:0;} 
#page section .s_1 menu li { float:left; padding:0; margin:0;} 
#page section .s_1 menu li a {background-image:url(../images/icon_buttons.png); background-repeat:no-repeat; width:79px; height:79px; display:block;}
#page section .s_1 menu li + li {margin-left:10px;}
#page section .s_1 menu li.b_1 a { background-position:0 0;}
#page section .s_1 menu li.b_2 a { background-position:-89px 0;}
#page section .s_1 menu li.b_3 a { background-position:-178px 0;}
#page section .s_1 menu li.b_4 a { background-position:-267px 0;}
#page section .s_1 menu li.b_5 a { background-position:-357px 0;}
...

この大きなCSSファイルはCSSを書く正しい方法ですか？

この種の階層は多くのサイトで見られます。

CSSファイルは小さくする必要がありますが、なぜこれらすべての冗長セレクターが必要なのですか？

はるかに高速に解析されるIDのみを使用することが可能であり、もちろん、CSSは小さくなります。

可能な場合はこれをidに変換することで、このcssファイルを縮小できます。私は何かが足りないのですか？

4

5 に答える 5

2

id'sを使用すると、CSS解析の点ではるかに高速になります。

Mozilla Devから、

可能な限り最も具体的なカテゴリを使用する

速度低下の最大の原因は、タグカテゴリのルールが多すぎることです。要素にクラスを追加することで、これらのルールをクラスカテゴリにさらに細分化できます。これにより、特定のタグのルールを一致させるために費やす時間がなくなります。

これは、この主題に関する優れた研究であり、これも述べています。

最も高価なセレクターはユニバーサルセレクター（ "*"）である傾向があり、複数のクラス（ ".foo.bar"、 "foo .bar.baz qux"など）を持つセレクターです。私たちはすでにこれを知っていましたが、プロファイラーから確認を得るのはいいことです。

于 2013-01-02T08:15:36.450 に答える
1

ID（またはクラス）を追加すると、cssの解析が高速になることに同意します。

質問で表示したコードの種類は、既存のソフトウェアのスキンである可能性が非常に高く、スキン開発者は、スタイルを設定するすべての要素にIDを追加するオプションがありません。この場合、階層を使用して特定のアイテムのスタイルを設定する必要があります。

しかし要約すると、idまたはclassesを使用する方が実際に高速であり、スタイルを適用するための最良の方法です。

于 2013-01-02T08:05:42.243 に答える
1

idのみを使用する場合、選択は高速になりますが、クラスを使用する場合よりも多くの選択を行う必要があります。cssがクリーンである場合。一般にidに基づいてスタイルを作成する場合の問題は、そのスタイルの再利用をすべて放棄することです。

最善の方法は、スタイルをクラスにリンクすることです。それはあなたに十分な速度を与え、cssファイルをより小さく保ちます。ほとんどのサイトでは、クライアントでの実行速度よりも小さいファイルの方がパフォーマンスにとってはるかに重要です。一般的なクライアントは、すべてのリソースを取得すると、マイクロ秒単位で複雑なページをレンダリングします。

あなたが指摘するcssはスプライトを使用しています。これはコンパスなどで非常にうまく生成できます。品質について厳しい判断を下す前に、元のコードを確認することも重要です。

于 2013-01-02T08:10:14.303 に答える
1

特に最後の5行に興味がある場合は、ここではclassvsのid議論が主なものではありません。

5行目と7〜11行目（最後の5行）はスプライトを参照しています。（あなたはこれを知っていると確信しています。）5つの異なる画像を参照するために6行を使用することは、あなたが得ようとしているのと同じくらい効率的です。

さらに、イメージはさまざまな場所にデプロイされるため、スプライトは通常クラスを使用します。

これらの行のCSS効率の問題は、完全な参照が必要かどうかです。

更新：このGoogleドキュメントは、ブラウザがCSSを解析する方法を説明しているため貴重です。結果として、それは私が以下に書いたもののいくつかを修飾します。ブラウザはセレクタごとに右から左に動作するため、 解析されることはありませんpage section。問題はロード時間の1つだけです。

#page section .s_1 menu li.b_5 a.b_5 aそれがスプライトが使用される唯一のコンテキストである場合も同様です。私も<a>自分でクラスを配置します、そしてあなたはボタンクラスを単にと呼ぶことができます.b_5。より良いclassNameは、IMOも迷うことはありません。の余分な5文字はbutton_5誰も殺すつもりはありません:)

#page section全体として、正確性を損なうことなく、パフォーマンスを向上させることなく、ほぼ確実に失う可能性があります。の使用menuもおそらく不要です。

少なくとも、間違いなく次のように削除することができます。

* {padding:0; margin:0;} /* Assuming this is already standard */
.s_1 { overflow:hidden; width:435px; float:left;}
.s_1 h1 { font-size:36pt; color:#001744; line-height:1.1; margin-bottom:64px;height:107px;}
.s_1 menu { list-style:none;} 
.s_1 li { float:left;} 
.s_1 menu li + li {margin-left:10px;}
.s_1 a {background-image:url(../images/icon_buttons.png); background-repeat:no-repeat; width:79px; height:79px; display:block;}
.b_1 { background-position:0 0;}
.b_2 { background-position:-89px 0;}
.b_3 { background-position:-178px 0;}
.b_4 { background-position:-267px 0;}
.b_5 { background-position:-357px 0;}

.b_1,.b_2,.b_3,.b_4,.b_5個人的には、それが良いと思います.s_1 a。またbackground-repeat:no-repeat;、スプライトを使用していて、高さと幅を指定している場合は、通常は必要ありません（幅がスプライトよりも大きい場合を除く）。

あなたが本当に熱心に感じているなら、あなたも決勝戦を失う可能性が;あり}ます:)

于 2013-01-02T08:15:22.803 に答える
0

IDを使用してページが小さい場合は、意味がある場合があります。ただし、ページに5つのリストがあり、それぞれの下に5つのリストアイテムがあるとします。次に、cssで使用する5 *5IDを定義する必要があります。大きなテキストになり、構文が悪くなります。さらに、1つのアイテムが複数のクラスを受講することができます。したがって、各クラスは何度も使用できます（オブジェクト指向の継承のように）。また、cssテキストのサイズを縮小し、読みやすさを向上させます。

于 2013-01-02T08:11:39.413 に答える