使用 BEM --modifier 有什么好处？

Question

我无法理解使用 BEM --modifier css 命名约定的优势。谁能告诉我这是为什么：

.my-element--checked {
    color: green;
}

比这个更好？

.my-element.checked {
    color: green;
}

使用 BEM --modifier 时，标记显然更加臃肿。

Answer 1

修饰符类在所有情况下都比 BEM 样式效果差的原因是，在现实世界的情况下（组件内可能有更复杂的组件），.checked在这种情况下，可以以某种方式应用于该元素上的任何类或该元素下的任何类这并不总是可预测的，尤其是在 UI 中的不同位置使用相同的组件时。我们倾向于使用类似的词来表示.active或，.disabled并且--modifier允许我们知道，而不是希望，知道，.active 按钮不会与 .tab.active等共享样式。

BEM 的基本承诺是，如果您遵循所有这些约定，您将拥有没有副作用的样式化组件。虽然可以在没有副作用的情况下进行编码，但整个团队很难做到这一点。但是，是的，如果您不喜欢它，请使用您喜欢的。如果您的项目足够小或足够年轻，您可能还不需要担心渲染绘制回流规则冲突。