Question

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

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

比这更好吗？

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

使用BEM - 修饰符时，标记显然更加臃肿。

Answer 1

根据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块是正在修改的块，而不是.menu__item元素。

根据项目的不同，可能需要使用此类操作规范。

Answer 2

要了解劳伦斯的评论，如果您在小型网站上工作，则不需要全面的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}

Answer 3

在所有情况下，修饰符类比BEM样式工作得不好的原因是在实际情况下（组件中可能包含更复杂的组件），在这种情况下.checked可以应用于该元素上的任何类或者以不可能总是可预测的方式在该元素下面的任何类，尤其是在我们的UI中的不同位置使用相同的组件时。我们倾向于使用类似的词来表示.active或.disabled，--modifier允许我们知道，而不是希望，知道.active按钮不会与{{1}共享样式} .tab或其他一些。

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

使用BEM - 修饰剂带来的好处是什么？

3 个答案: