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是一个块＆amp; main-nav__item是子元素。

这样做是因为有些人可能会将此块命名为main_nav，这会使单个下划线产生混淆：main_nav_item

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

Answer 2

我要回到第二个@Imran Bughio的回答，但我试图进一步澄清这个问题。

在standard BEM style中，单个下划线保留给修饰符。此外，它们通常代表键/值对的组合。例如。

.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

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

Answer 3

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

Nicolas Gallagher在SUIT CSS中使用了替代语法的示例。其中使用以下语法。

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

您可以在此处阅读更多内容SUIT CSS naming conventions

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

According to BEM naming convention, single underscore has two other usages,

The modifier name is separated from the block or element name by a single underscore (_).

The modifier value is separated from the modifier name by a single underscore (_).

So for separating element name from the block name is done by a double underscore.

The element name is separated from the block name by a double underscore (__).

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

5 个答案: