块元素可以依赖于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没有绝对的规则，但这是一个非常好的问题！

在纯粹的理论BEM中，您应该更喜欢.header__text--white，原因有两个：

• 它创造了更多的可能性，因此它可以防止代码重复
• 它允许您只使用一个类
来保持选择器

但是个人，我经常选择.header--bgblue .header__text：

• 块修饰符比元素修饰符更简单。当第二个创建可能性时，它也会产生复杂性并且难以在不读取完整标记的情况下预测块渲染的内容。
• 促进一致性。如果背景为蓝色时文本应始终为白色，那么在最佳实践中采用一个简短的方法来明确表示这一点可能会很好。
• 如果你需要重新设置块修饰符的每个元素，它会使标记和样式不可读。

总结一下，这是您的选择！ 你应该根据用例进行调整;）