要素をBEMのブロック修飾子に依存させることはできますか？

Question

BEMを使用する際によくあることは何ですか？私はどこでも見つけることができません。 SCSSでは、ブロックの修飾子の.block__element dependentを作れますか？

たとえば、.header__textは常に白ですが、.headerの修飾語が.header--bgblueの場合のみです。

<div class="header"> 
    <div class="header__text"> 
     Default color is black 
    </div> 
</div> 

<div class="header header--bgblue"> 
    <div class="header__text"> 
     I want this to be white because it's inside header--bgblue 
    </div> 
</div> 

また、各要素に個別の要素修飾子を付けるのがベストプラクティスですか？

<div class="header header--blue"> 
    <div class="header__text header__text--white"> 
     I want this to be white because it's inside header--bgblue 
    </div> 
</div> 

この場合、それはわずかな労力ですが、より多くの依存関係（例：より多くの要素が含まれている）がある場合は、これが道ですか？

Answer 1

BEMに絶対的なルールはありませんが、本当に良い質問です！純粋theorical BEMで

、あなたは、2つの理由.header__text--whiteを好む必要があります。それは、より多くの可能性を作成する

• 、それはコードの重複
• を防ぐので、それだけで一つのクラス
であなたのセレクターを維持することができます

しかしpersonnaly、私はよく.header--bgblue .header__textを選択します。

• ブロック修飾子は要素修飾子よりも簡単です。 2つめが可能性を生み出すと、複雑さが増し、完全なマークアップを読み取らずにブロックのレンダリングを予測するのが難しくなります。
• 一貫性を促進します。背景が青色のときにテキストが常に白でなければならない場合は、ベストプラクティスの短所を明示的に取っておきましょう。
• ブロック修飾子のすべての要素のスタイルを変更する必要がある場合は、マークアップとスタイルを読むことができません。

要約すると、あなたの選択です！ それをユースケースに合わせてください;）