推奨CSSスタイルガイド

Question

このようなhtmlを作成しましょう。

<div class="mainElement"> 
    <div class="subElement1">...</div> 
    <div class="subElement2">...</div> 
    <div class="subElement3">...</div> 
</div> 

したがって、「subElement1」のスタイルを変更したい場合は、よりスタンドアットであるか、より高速です。あなたが持っているものから、

.mainElement > .subElement1{ 
    /*some CSS here..*/ 
} 

.mainElement .subElement1{ 
    /*some CSS here..*/ 
} 

.mainElement > div:first-child{ 
    /*some CSS here..*/ 
} 

Answer 1

、最高のは、次のとおりです。

.mainElement > .subElement1{ 
    /*some CSS here..*/ 
} 

それが親クラスから直接の子をターゲットにしているため。

しかし、あなたが本当にパフォーマンスをしたい場合は、直接クラスをターゲットにしたい：

.subElement1{ 
    /*some CSS here..*/ 
} 

それとも、もっと高速なコードをしたい場合は、IDを使用します。

#subElement1{ 
    /*some CSS here..*/ 
} 

IDは、ブラウザのために、一般的に高速です対象となるのは、要素ごとに1回だけ使用されるはずだからです。

ブラウザはCSSを右から左に読み込むので、本当に必要な場合を除き、親クラス/ IDを追加するとコードが遅くなります。

Answer 2

なぜ.subelement1ではないのですか？

セレクタをネストする理由がない場合は、ネスト/結合しない方が良いでしょう。

しかし、あなたの質問には、あなたが投稿したオプションを何をしようとしているのかが本当に異なるのですか。

最初のものは、高速かつ具体的であるが、第二の選択肢は今、唯一の要素ですが、あなたがお互いの内部でそれらをネスト保つことができ.mainElement内にあるすべての.subelement1のクラスを選択し.mainElement

の直接の子孫のみを選択し、彼らはすべて直接的な子孫だけでなく同じスタイルをとることになるでしょう。それはそれはあなたがすべてでマークアップを変更し、用途を言っていたならば、これはトラブルにつながる可能性first-childある.mainElementの内部divを見つける最も固有のものであり、トラブルにあなたを得ることができ、最後の1については

span sの代わりにdivでもあなたがそれを与えたクラスに関係なく、最初の子供だけがいつもそのスタイリングを得るでしょう。

Answer 3

.subElementで十分です。親クラスに最初にアクセスして、ファイルサイズ（非常に小さいサイズ）に影響し、CSSロードファイルを遅くする必要があります。このリンクがあなたに役立つことを願っていますWriting efficient CSS