ブロック内の多くの要素に適用される状態変更の適用

Question

私はBEMがたくさん好きですが、私は通常、サブクラスのオン/オフを切り替えるBEMの変形を使用します。 SASSのように：

.my-block{ 
    &__element { 
    color : blue; 

    // I prefer state-classes over modifiers for state 
    &.is-selected { color : red; } 

    &--small { height: 50%; } 
    } 
} 

私が最もBEMっぽいな方法で解決する方法を疑問に思う問題は、ブロック内の要素の多くに適用されるべきである私のjavascriptの状態変化に対処する方法です。例えば、あなたがstep1、step2、またはstep3のいずれかのプロセスに属しているかどうかによって、異なる要素を表示または非表示にするコンポーネントがあるとします。

各要素に状態クラスを適用するだけで十分ですが、それは単なる問題です。私は7つのニーズはステップ2で非表示にする10個の要素を持っているなら、それは私はちょうど私がそれからできた

&__element { 
    display: none; 

    // -- this -- 
    .my-block.is-step4 & { display : block } 
} 

のではないので、BEM-純粋な形でルールを追加したかのように7倍ほどのjavascriptを追加することです要素ごとに1つではなく、1つのmyBlock.classList.toggle("is-step4")でこれらのルールをすべて有効にします。

私のソリューションは、開発者の利便性と純粋なBEMの実用的な中間点でしたが、要素を更新するためにJavaScriptのコード行の面でも「純粋な」BEMソリューションがあるのだろうかと思います。

Answer 1

この場合はネストされたセレクタを使用してください。したがって、親ブロックにはステップモディファイアがあります。このモディファイアには、影響を与える必要がある残りのブロックがすべて含まれています（親がページ全体である場合は恐れません）。

https://en.bem.info/methodology/faq/#can-i-use-nested-selectorsを参照してください。推奨される解決策です。