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

在BEM中，我知道有了修饰符，两个破折号是有意义的，这样你就可以区分my-block-my-modifier和my-block--my-modifier中的修饰符。

但是为什么要使用block__element而不是block_element

Double Undercore用于定义块的子元素。

即：

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

其中CCD_ 5是块&CCD_ 6是一个子元素。

之所以这样做，是因为有些人可能会这样命名他们的块main_nav，这会与下面这样的单下划线混淆：main_nav_item

因此，双下划线将澄清以下内容：main_nav__item。

我要回答2nd@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

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

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

所使用的替代语法的一个例子是Nicolas Gallagher的SUIT CSS。它使用以下语法。

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

您可以在这里阅读更多SUIT CSS命名约定

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

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

或

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

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

修改器名称与块或元素名称由一个下划线(_(分隔

修饰符值与修饰符名称由一个下划线(_(分隔

因此，要将元素名称与块名称分隔开，需要使用双下划线。

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

基本概念：block-name__element-name_modifier-name

更多详细信息：BEM(块、元素、修饰符(

相关内容