29

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

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

4

5 回答 5

55

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

IE：

<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.

于 2014-07-10T07:04:31.413 回答
9

我要去第二个@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

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

于 2014-08-09T00:15:46.563 回答
7

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

Nicolas Gallagher在SUIT CSS中使用的替代语法的一个示例。它使用以下语法。

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

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

于 2014-07-25T11:09:52.503 回答
3

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

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

或者

.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */
于 2016-09-14T18:07:59.940 回答
1

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

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

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

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

于 2019-05-19T04:10:05.547 回答