Css 为边界元修改器的子元素指定样式

我使用以下BEM样式的Css来定义一个简单的框：

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

我还需要能够在错误模式下显示框，因此定义了以下修改器：

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

我遇到的问题是找到一种很好的方法来定义嵌套元素的样式，例如当框处于错误模式时的框标题

我是否也在标题和父项上定义了修饰符：

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

---

这两种方法都是有效的

使用元素上的修改器：

.box__heading--error {
}

或通过级联：

.box--error .box__heading {
}

但是，如果块可以嵌套在自身内部（递归），则必须避免级联。例如：

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

方框1
方框2

---

这里不能使用级联，因为

.box--error.box\uu标题将设置框2的样式。
要获得最佳实践，请在框容器上使用修饰符
box--error
。在处理更复杂的模块时，您不希望将修改器类添加到所有需要根据修改器设置样式的元素中

在Tarh的例子中，有两个盒子标题类。如果样式不能保持其他状态，这将导致问题，因为这些样式不应该具有相同的类名

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