与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。