为什么 BEM 经常使用两个下划线而不是一个作为修饰符？

Question

在 BEM 中，我知道使用修饰符时，两个破折号是有意义的，这样您就可以区分

my-block-my-modifier

和

my-block--my-modifier

中的修饰符。

但是为什么使用

block__element

而不是

block_element

？

Answer 1

双下划线用于定义块的子元素。

即：

<nav class="main-nav">
    <a class="main-nav__item" href="#">Text</a>
</nav>

其中

main-nav

是块，

main-nav__item

是子元素。

这样做是因为有些人可能会像这样命名他们的块

main_nav

这会与单下划线产生混淆，如下所示：

main_nav_item

因此双下划线将澄清这样的内容：

main_nav__item

。

Answer 2

我要去第二个@Imran Bughio 的回答，但我正在尝试进一步澄清这个问题。

在标准 BEM 样式中，单下划线保留给修饰符。此外，它们通常表示键/值对的组合。例如。

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

这与 inuit.css 所倡导的 modified BEM 语法形成对比，后者是布尔值。

.block--vertical
.block--horizontal
.block__element--big
.block__element--small

根据我的经验，使用修改后的语法时，您很快就会遇到表达式限制。例如。如果你愿意写的话

.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small

如果您尝试描述诸如

background-attachment

之类的键，则键/值关系不会是唯一的，这会导致

.block__element--background-attachment-fixed

另一个额外的好处是，您可以使用基于标准命名约定的库来提高工作流程的生产力：

• http://bem.info/tools/bem/bem-tools/
• https://github.com/hoho/jquery-bem

Answer 3

还值得一提的是，BEM 语法并不是强加给我们的，如果您发现另一种更具可读性的语法，那么请务必使用它。重要的是一致性，确保其他开发人员使用相同的语法。

使用的替代语法的示例位于 Nicolas Gallagher 的 SUIT CSS 中。它使用以下语法。

ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent

您可以在此处阅读更多内容SUIT CSS 命名约定

Answer 4

因为其块可以用连字符或下划线分隔，例如：

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

或

.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */

Answer 5

根据BEM命名约定，单下划线还有另外两种用法，

1. 修饰符名称与块或元素名称之间用单个下划线 (_) 分隔。
2. 修饰符值与修饰符名称之间用一个下划线 (_) 分隔。

因此，通过双下划线将元素名称与块名称分开。

元素名称与块名称之间用双下划线 (__) 分隔。

Answer 6

基本概念：块名__元素名_修饰符名

更多详细信息： BEM（块、元素、修改器）