css - BEM 修飾子の子要素のスタイルを指定する

Question

シンプルなボックスを定義するために、次の BEM スタイルの Css があります。

.box { /*styles */ }
.box__heading {/*styles */}
.box__image { /*styles */}

また、ボックスをエラーモードで表示できるようにする必要があるため、次の修飾子を定義しました。

.box--error {/*styles */}

私が抱えている問題は、ボックスがエラーモードのときに box__heading などのネストされた要素のスタイルを定義する良い方法を見つけることです。

親だけでなく見出しにも修飾子を定義しますか?

 <div class="box box--error">
   <h2 class="box__heading box__heading--error"></h2>
 </div>

または、CSSでこれを行うだけですか:

.box--error {}
.box--error .box__heading { /* error styles*/ }

score 2 · Accepted Answer

ベストプラクティスbox--errorとして、ボックスコンテナーで修飾子を使用するだけです。より複雑なモジュールを扱っている場合、修飾子に応じたスタイルが必要なすべての要素に修飾子クラスを追加したくありません。

Tarh の例では、2 つの box__heading クラスがあります。スタイルをそのままにしておかないと、同じクラス名を持たないようにする必要があるため、問題が発生します。

2 に答える 2