サス子要素の順序？

Question

子divのスタイルを追加したいだけです。私はこの方法でやっています。

.summary_boxes { 
    .header { 
    text-align: center; 
    } 
    .description { 
    text-align: center; 
    } 
} 

私のヘッダークラ​​スと説明クラスは、contentという別のdivの内部にあります。

このクラスについても言及してください。このように

.summary_boxes > content { 
    .header { 
    text-align: center; 
    } 
    .description { 
    text-align: center; 
    } 
} 

どの形式が正しいですか？

Answer 1

答えは簡単ではありません。これは、CSSをどのようにスケールするかによって異なります。最初のものが最初です。 CSSは左から右にではなく、右から左に解析されます。

.container > .left-col .column-heading > div > .final_thing_to_style { 
    // styles 
} 

これよりも高速である：

.final_thing_to_style { 
// styles 
} 

CSSが右から左に解析されるため、2番目のバージョンは、より効率的である多くの人々はこのようなものがあると思います。すぐにクラスfinal_thing_to_styleが見つかり、パーサが実行されます。

あなたのCSSを見てみましょう。

.summary_boxes > content { 
    .header { 
    text-align: center; 
    } 
    .description { 
    text-align: center; 
    } 
} 

直接的な子を追加すると、より具体的なCSSが作成されますが、必ずしも必要ではありません。省略する必要があります。しかし、.headerと.descriptionをどのように使用するのか自分自身に尋ねてください。これは、あなたがこれらのクラスを使用します唯一の場所である場合は、代わりにこのような何かを考えてみます。

.summary_box_header, 
.summary_box_description { 
    text-align: center; 
} 

をあなたのWebページの異なる領域に.headerと.descriptionの異なる味をする必要があります場合は、この提案があなたを行いますスタイルがあまりにも強く結合しています。あなたは多くの重複で終わるでしょう。これは、以下のCSSを作成します

.header { 
    .summary_boxes & { 
    text-align: center; 
    } 

    .another_context & { 
    text-align: left; 
    } 

    .yet_another_context & { 
    text-align: right; 
    } 
} 

：親セレクタ&を使用して

.summary_boxes .header { 
    text-align: center; 
} 

.another_context .header { 
    text-align: left; 
} 

.yet_another_context .header { 
    text-align: right; 
} 

を、我々は非常に読みやすい作成することができます

結合ビットを緩めるために、あなたはこのような何かを試みることができます私たちの.headerクラスのコンテキスト。我々はいくつかの特異性を追加しますが、読みやすさと柔軟性を得ています。

いくつかの実験では、スタイルに適切で柔軟なパターンを作成できます。

Answer 2

すべてが特異性（https://css-tricks.com/specifics-on-css-specificity/）になります。 ルールは、意図された使用領域外にCSSルールを流さずに、できるだけ特異性レベルを低く保つようにします。

特化度が低いと、再利用性、シンプルさ、軽量なファイルなど、多くのメリットがもたらされます。しかし、あなたの特異性が低すぎると、あなたのルールは流血し始め、互いに干渉し合います。

ここでは間違いはありません。目的のユースケースに戻り、今後コードを検証します。HTMLコードと、これらのクラスが将来どのように使用されるかについての背景情報がなければ、あなたが具体性の面で何をすべきか、すべきでないのかを言う方法がありません。

アンディの答えにはいくつかの例がありますが、あなたのコードが構造化される（または将来再構築される）さまざまな方法に制限はありません。