与BEM类命名约定混淆。更深层次

Question

例如，我有一个带菜单元素的菜单块：

.menu
.menu__element
.menu__element--current

但是我们可以说.menu块包含在另一个块.header

中

在这种情况下如何处理命名？

.header 
.header__menu 
.header__element 

或

.header 
.header__menu 
.header__menu__element 

或

.header 
.menu 
.menu__element

Answer 1

考虑使用mixins（同一DOM节点上的几个实体）：

<div class="header">
    <ul class="menu header__menu">
        <li class="menu__element"></li>
        <!-- ... -->
    </ul>
</div>

因此，阻止菜单也是元素 header__menu 。这样就可以为任何抽象菜单应用样式，并为标题内的特定菜单添加一些特殊规则。

Answer 2

菜单本身应该是一个类，所以.menu就足够了。如果它只是一个标题中的菜单，而不是其他任何地方，那么.header-menu。然后你可以直接指向菜单，而无需通过标题类。

如果您愿意按照您概述的方式进行，那么.header_menu。

Answer 3

<div class="header">
    <ul class="menu">
        <li class="menu__element">...</li>
        <li class="menu__element menu__element--current">...</li>
        ...
    </ul>
</div>    

.header {...}
.menu {...}
.menu__element {...}
.menu__element--current {...}

是对的。

当块插入另一个块时，块名称不会更改。

BEM禁止在元素中添加元素并编写类似block__element__element的类名，更多信息：How to properly set an element's scope using BEM?

Answer 4

以下是BEM的官方文件（http://getbem.com/faq/#css-nested-elements）;

无论您的嵌套深度如何，您始终将顶级父级用作块元素。基本上就是这样;

.header 
.header__menu 
.header__element