7

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

.menu
.menu__element
.menu__element--current

但是让我们说.menu块包含在另一个块中，.header

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

.header 
.header__menu 
.header__element

或者

.header 
.header__menu 
.header__menu__element

或者

.header 
.menu 
.menu__element
4

4 回答 4

8

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

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

所以block menu同时也是element header__menu。这使您能够为任何抽象菜单应用样式并在标题内为该特定菜单添加特殊规则。

于 2013-10-18T09:39:02.060 回答
3

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

如果您更喜欢按照您概述的方式进行操作，那么 .header_menu。

于 2013-03-08T12:54:49.480 回答
2 
<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，更多信息：如何使用 BEM 正确设置元素的范围？

于 2015-01-12T11:57:51.587 回答
0

这是 BEM 的官方文档所说的（http://getbem.com/faq/#css-nested-elements）；

在此处输入图像描述

不管你嵌套多深，你总是使用顶部父元素作为块元素。所以基本上是这样；

.header 
.header__menu 
.header__element
于 2017-09-13T15:03:41.097 回答