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

Posted 2023-02-23

【中文标题】为啥 BEM 经常使用两个下划线而不是一个下划线作为修饰符？

【英文标题】：Why does BEM often use two underscores instead of one for modifiers?为什么 BEM 经常使用两个下划线而不是一个下划线作为修饰符？

【发布时间】：2014-08-31 11:01:57

【问题描述】：

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

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

【参考方案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。

【参考方案2】：

我将第二次回答@Imran Bughio，但我正试图进一步澄清这个问题。

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

.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

【讨论】：

我没有看到使用双破折号作为修饰符的问题......它在视觉上的不同足以强调它使带有修饰符的类名看起来足够不同。如果我们谈论的东西看起来有多复杂.......block__element_background-attachment-fixed 与使用双破折号并没有太大区别，只是现在，乍一看你的类看起来像 block__element 而不是 @987654332 @?代码库中的可扫描性与形状有关

【参考方案3】：

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

Nicolas Gallagher 在SUIT CSS 中使用了另一种语法的示例。它使用以下语法。

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

您可以在这里阅读更多内容SUIT CSS naming conventions

【讨论】：

感谢 Colin，我也非常喜欢 SUIT CSS 命名以及 plan on using it in the near future

【参考方案4】：

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

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

或

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

【参考方案5】：

根据BEM naming convention，单下划线还有另外两种用法，

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

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

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