块元素可以依赖 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，原因有两个：

它创造了更多的可能性，所以它防止了代码重复
它允许您只使用一个选择器class

但个人而言，我经常选择 .header--bgblue .header__text:

块修饰符比元素修饰符更简单。当第二个创造可能性时，它也创造了复杂性，并且很难在不阅读完整标记的情况下预测块渲染的内容。
它促进了一致性。如果在背景为蓝色时文本应始终为白色，则最好在最佳实践中使用快捷方式来明确这一点。
如果您必须为块修饰符重新设置每个元素的样式，这会使标记和样式不可读。

总而言之，这是您的选择！您应该根据用例进行调整；)

块元素可以依赖 BEM 中的块修饰符吗？

Can block elements be dependent on block modifiers in BEM?

html

css

sass

bem