我无法理解使用 BEM --modifier css 命名约定的优势。谁能告诉我这是为什么：
.my-element--checked {
color: green;
}
比这更好？
.my-element.checked {
color: green;
}
使用 BEM --modifier 时，标记显然更加臃肿。
【问题讨论】：
.checked）时表现得非常好。为包括修饰符在内的所有内容的每个组合增加类不仅会膨胀——好词——你的 CSS，而且还会使其变得更加脆弱，每次更改一些小东西时都需要更改多个文件。
根据this documentation 的说法，这不仅仅关乎 CSS 性能。使用 BEM 时，同一个 DOM 节点可以同时表示许多块和元素。这样，您就可以拥有类似<div class="menu__item button"> 的内容。
<div class="menu__item button active"> 和 <div class="menu__item button button--active"> 之间的区别在于，在第二个示例中，使用 BEM 约定，您可以指定 .button 块是正在修改的块，而不是 @987654326 @元素。
根据项目，可能需要这种操作系统规范。
【讨论】：
要了解 Lawrence 的评论，如果您在小型网站上工作，则不需要完整的 BEM 命名。但是，在处理大型企业解决方案时，它有助于保持组件的独立性和独立性。例如，我正在与其他 4 位开发人员一起开发大型 CMS。因为我们都在构建可以以无数组合编写的独立组件，所以每个组件都需要被包含以避免 CSS 冲突。如果我们只依赖链式或上下文选择器，我们很快就会遇到特殊性问题。
按照您的示例，您可能会遇到.my-element.checked、.this-box.checked、.section .my-element.checked 等选择器。你会得到很多膨胀和很多特异性。通过使用 BEM，而不是 .my-element.checked（特异性为 20），您可以只使用.my-element--checked（特异性为 10）。这使您的代码更加模块化和可移植，并简化了特定性的升级——这通常会导致某人感到沮丧并在!important 中折腾。
这并不是说你永远不应该使用上下文选择器，只要记住项目的范围和两个系统的潜在缺陷。
对于您的具体示例，您可能希望改用 checked 属性（或在需要时添加）。如果这是一个表单域，那么<input type="checkbox" checked> 实际上可能会更好。该属性将帮助屏幕阅读器，您仍然可以基于它设置样式：
input[type="checkbox"]:checked {color: green}
【讨论】：
修饰符类在所有情况下都不如 BEM 样式工作的原因是，在现实世界的情况下（组件中可能有更复杂的组件），.checked 在这种情况下可以应用于该元素上的任何类或任何以不总是可预测的方式在该元素下分类，尤其是在我们 UI 的不同位置使用相同组件时。我们倾向于使用类似的词来表示.active 或.disabled，而--modifier 让我们知道，而不是希望，知道.active 按钮不会与.active .tab 或类似的东西共享样式。
BEM 的基本承诺是，如果您遵循所有这些约定，您将拥有没有副作用的样式化组件。虽然可以在没有副作用的情况下进行编码，但整个团队很难做到这一点。但是，是的，如果您不喜欢它，请使用您喜欢的东西。如果您的项目足够小或足够年轻，您可能不需要担心冲突规则渲染油漆回流。
【讨论】：