CSSのセレクターの速度/冗長性[終了]

Question

CSSのブラウザセレクタの速度に関する情報はありますか？言い換えれば、異なるセレクターが（同じブラウザーで）互いに比較する方法です。

たとえば、次のようなコードをよく見ます（そして書きます）：

#content #elem { ...rules... }

しかし、これらの要素は一意のIDなので、 #elem のみが必要ですよね？これにより、ブラウザーがより複雑なセレクターを持っている方が速いのではないかと考えるようになりました。 >

別の例としては、 table tr td .class vs table .class

があります。

Answer 1

正直に言うと、あなたは非常に短い時間を話しているので、実際には違いはないと思います。

より具体的なセレクターを使用するという点では、いくつかの理由からこれは良い習慣だと思います：

1. コードの読みやすさを向上します-セレクターがHTMLに対して適用されている場所を一目で確認できます。
2. セレクターが他のどこかに上書きされる可能性を減らします。これは、より特定性の高いセレクターが書き込まれるため、発生する可能性が非常に低いためです。

あなたが話していることは、jQueryなどのJavaScriptライブラリを使用する場合、ドキュメント全体を解析する必要があるため、違いが生じる可能性がありますが、速度の違いに気付いたことはありません。

Answer 2

こちら は私が得た情報ですクイック検索後。

Answer 3

速度には違いがありますが、通常の使用例では認識できません。そのようにCSSを記述する本当の理由は、特異性です。あなたが持っている場合です

#content #elem {color: black;} 

and

#elem {color: red;}

より具体的なルールであるため、要素の色は黒にする必要があります。

Answer 4

賢明な男ではありませんが、その質問を書くのにかかった時間は、おそらくあなたのサイトを訪れるすべてのユーザーのすべての時間節約の合計を超えています（#id＃id2 vs＃id2に関して） 。この答えを書く時間もそうです...

今すぐ投票してください：）

Answer 5

Mozillaのガイドラインは興味深いかもしれません。

Answer 6

1. 効率と読みやすさの間には常に何らかの選択肢があります。もちろん、 table tr td .class は最も読みやすいですが、非常に非効率的で単純化できます-どこでも見たことがありますか（有効なマークアップを想定） tr は table または td （ tr なし）？少なくとも次のような冗長部分をコメントできます：

   /* table tr */ td .class {
       color: #ccf;
   }
   

2. 他の人が言ったように、追加の特異性が必要な場合があります。 #content の特定のコンテキストの場合を除き、 #elem はどこでも赤になります。

   #elem {
       /* usually red */
       color: red;
   }
   
   #content #elem {
       /* except when in specific context */
       color: black;
   }