"inner"ブロック修飾子に基づくスタイル要素

Question

"inner修飾子"に応じてブロックを "外側"からスタイル設定することはできますか？ ここでは例です：

HTML

<div class="Header"> 
    <div class="Button Header__button"> 
     Seperate Block with optional modifier Button--expanded 
    </div> 
</div> 

button.cssを

.Button--expanded { 
    height: 100%; /* Default height of expanded buttons */ 
} 

header.css

/* Expanded buttons within header have a different height */ 

/* Approach 1*/ 
.Header__button.Button--expanded { 
    height: 32px; 
} 

/* Approach 2*/ 
.Header__button--expanded { 
    height: 32px; 
} 

Button--expandedクラスは、Buttonコントロール/ブロック自体しか知りませんいくつかのモジュラーJSによって動的に追加されます。したがってApproach 2ながら「箱の外」Approach 1作品は、私が何をがあることを知っている...何とかバブルHeader制御までexpanded状態がHeader__button要素に明示的な修飾クラスHeader__button--expandedを設定するために

をいくつかの余分なJSが必要になります絶対に間違っているか間違っているのかというと、誰かがそれぞれのアプローチの賛否両論を指摘できるのであれば、本当に感謝しています。

Answer 1

どのようなスタイルを設定するかによって異なります。

'--expanded'修飾子はすべてのボタンに共通ですか？またはHeader__ボタンのみ？

あなたはよりグローバルなボタン修飾子を持つようにしたい場合2.

アプローチを使用し、ヘッダのみのために修飾子を追加したい場合は、1

アプローチを使用します