CSSのセレクターの速度/冗長性[終了]
-
03-07-2019 - |
質問
CSSのブラウザセレクタの速度に関する情報はありますか?言い換えれば、異なるセレクターが(同じブラウザーで)互いに比較する方法です。
たとえば、次のようなコードをよく見ます(そして書きます):
#content #elem { ...rules... }
しかし、これらの要素は一意のIDなので、 #elem
のみが必要ですよね?これにより、ブラウザーがより複雑なセレクターを持っている方が速いのではないかと考えるようになりました。 >
別の例としては、 table tr td .class
vs table .class
解決
正直に言うと、あなたは非常に短い時間を話しているので、実際には違いはないと思います。
より具体的なセレクターを使用するという点では、いくつかの理由からこれは良い習慣だと思います:
- コードの読みやすさを向上します-セレクターがHTMLに対して適用されている場所を一目で確認できます。
- セレクターが他のどこかに上書きされる可能性を減らします。これは、より特定性の高いセレクターが書き込まれるため、発生する可能性が非常に低いためです。
あなたが話していることは、jQueryなどのJavaScriptライブラリを使用する場合、ドキュメント全体を解析する必要があるため、違いが生じる可能性がありますが、速度の違いに気付いたことはありません。
他のヒント
こちら は私が得た情報ですクイック検索後。
速度には違いがありますが、通常の使用例では認識できません。そのようにCSSを記述する本当の理由は、特異性です。あなたが持っている場合です
#content #elem {color: black;}
and
#elem {color: red;}
より具体的なルールであるため、要素の色は黒にする必要があります。
賢明な男ではありませんが、その質問を書くのにかかった時間は、おそらくあなたのサイトを訪れるすべてのユーザーのすべての時間節約の合計を超えています(#id#id2 vs#id2に関して) 。この答えを書く時間もそうです...
今すぐ投票してください:)
Mozillaのガイドラインは興味深いかもしれません。
-
効率と読みやすさの間には常に何らかの選択肢があります。もちろん、
table tr td .class
は最も読みやすいですが、非常に非効率的で単純化できます-どこでも見たことがありますか(有効なマークアップを想定)tr
はtable
またはtd
(tr
なし)?少なくとも次のような冗長部分をコメントできます:/* table tr */ td .class { color: #ccf; }
-
他の人が言ったように、追加の特異性が必要な場合があります。
#content
の特定のコンテキストの場合を除き、#elem
はどこでも赤になります。#elem { /* usually red */ color: red; } #content #elem { /* except when in specific context */ color: black; }