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

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

.menu
.menu__element
.menu__element--current

但可以说.menu块包含在另一个块内，.header

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

.header 
.header__menu 
.header__element 

or

.header 
.header__menu 
.header__menu__element 

or

.header 
.menu 
.menu__element

考虑使用“混合”（同一 DOM 节点上有多个 BEM 实体）：

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

所以阻止menu也是元素标题__菜单同时。这使您能够为任何抽象菜单应用样式，并为标题内的特定菜单添加特殊规则。