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

Question

在BEM,据我所知,使用修改器,两个破折号是有道理的,这样就可以在区分修改my-block-my-modifier与my-block--my-modifier.

但为什么用block__element而不是block_element？

Answer 1

Double Underscore用于定义块的子元素.

即:

<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支持的修改的 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命名约定