CSSで非常に具体的なセレクターを使用する利点はありますか？

StackOverflow https://stackoverflow.com/questions/1418514

質問

jQueryでは、セレクターを使用するときに、jQueryが探しているものを見つけるためにDOM全体をトラバースする必要がないように、より具体的にすることが有利であることを理解しています。たとえば、$('span.description')クラスが$('.description')要素にのみ適用されることがわかっている場合、descriptionは<span>よりも優れています。

これもCSSの場合ですか？ span.description { }の代わりに.description { }を使用する特定の利点はありますか？速度、最適化などの観点から考えています。どこに表示するかを正確に指定することで、ブラウザに作業を保存しますか？

役に立ちましたか？

解決

これはCSSに当てはまります-

適切なルールは、最も近いIDから降りることです。 IDにはインデックスが付けられているため、それらの検索は非常に高速です。セレクタで複数を使用する理由はありません。

Google Code-ブラウザレンダリングの最適化

これは、この問題を含む、このテーマに関する多くの質問に答えました。 役に立つと思います。

他のヒント

CSSの特異性を確認します-これは、CSSに多少なりとも具体的になる最も重要な理由です。

http://www.w3.org/TR/CSS2/cascade .html＃specificity

ブラウザのパフォーマンスはほとんど問題ではないので（前述のjqueryを除く）、優先順位を制御する場合、または何かをもっと読みやすくしたい場合に、ガイドラインを具体的にします。あなたのCSS。過度に指定すると、CSSセレクターを再利用して複雑になりすぎることがあります。

編集

これは少し重複しているように見えます：

CSSパフォーマンスの質問

これは常に、HTMLコードの量と構造に依存します。特にIDと適切なセレクターを使用することをお勧めします。 （つまり、li.navの代わりに#nav li）。ブラウザは最初にhtmlをロードしてから、cssを適用するので、あなたは大いに役立ちます。

これは、純粋なcss（jqueryなし）に関しては、レンダリングエンジンが高度に最適化されているため、特にcssの適用に関して、今日では速度の違いを区別するのは容易ではありません。したがって、通常は問題ではありません。

私が知る限り、セレクターがどの程度具体的であるかはパフォーマンスにほとんど影響しません。

より具体的なセレクターが最も役立つ2つの領域は、必要のない場所にセレクターが適用されないリスクを軽減し、あるセレクターを別のセレクターに優先させることです。

より具体的なルールは、より具体的でないルールよりも優先されるため、次のようになります。

span.myclass {}

次よりも優先されます：

.myclass {}

（ルールが宣言された順序に関係なく）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top