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

Question

我无法理解使用 BEM --modifier css 命名约定的优势。有人可以告诉我为什么会这样：

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

比这更好？

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

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

Answer 1

要了解 Lawrence 的评论，如果您在小型站点上工作，则不需要完整的 BEM 命名。但是，在处理大型企业解决方案时，它有助于保持组件的独立性和独立性。例如，我正在与其他 4 位开发人员一起开发大型 CMS。因为我们都在构建可以以无数组合编写的单独组件，所以需要包含每个组件以避免 CSS 冲突。如果我们只依赖链式或上下文选择器，我们很快就会遇到特殊性问题。

按照您的示例，您可能会遇到诸如.my-element.checked,.this-box.checked和.section .my-element.checkedon 之类的选择器。你会得到很多膨胀和很多特异性。通过使用 BEM，而不是 .my-element.checked(specificity of 20)，您可以只使用.my-element--checked(specificity of 10)。这使您的代码更加模块化和可移植，并简化了特殊性的升级——这通常以某人感到沮丧和折腾而告终!important。

这并不是说你永远不应该使用上下文选择器，只要记住项目的范围和两个系统的潜在故障。

对于您的具体示例，您可能希望查看使用checked属性来代替（或者如果需要，另外）。如果这是一个表单域，那么<input type="checkbox" checked>实际上可能会更好。该属性将帮助屏幕阅读器，您仍然可以基于它设置样式：

input[type="checkbox"]:checked {color: green}

Answer 2

根据这个文档，这不仅仅是关于 CSS 性能。使用 BEM 时，同一个 DOM 节点可以同时表示许多块和元素。这样，您可以拥有类似<div class="menu__item button">.

<div class="menu__item button active">和之间的区别在于<div class="menu__item button button--active">，在第二个示例中，使用 BEM 约定，您可以指定.button块是正在修改的块，而不是.menu__item元素。

根据项目的不同，可能需要这种操作系统规范。

Answer 3

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

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