html - BEM block 、命名和嵌套

Question

我正在尝试围绕 BEM 命名约定进行思考。我被困在这个。我可能误解了什么，让我们看看。

我有一个侧边栏导航和一个内容导航。

我的侧边栏导航看起来像这样

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

我的内容导航看起来像这样

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

现在，如果我为 .nav__item 设置样式，我将遇到一个问题，它们出现在我的两个导航中，并且不应具有相同的样式。我应该在这里做一些嵌套，还是我命名我的 block 和元素有误？

CSS 嵌套示例:

.content__nav .nav__item { background: Red; }

或者我应该这样命名:

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>

你能帮忙吗？

Answer 1

关于如何编写 BEM 类有许多变体，因此请注意存在多个相互竞争的标准。它最初是一套宽松的指导方针。自发布此答案以来，Yandex has significantly overhauled their official standard (这是一个很大的进步)。我使用的 BEM 版本很大程度上基于 an article by Nicolas Gallagher .

此时我使用"Atomic OOBEMITLESS" ，这实际上只是一种说法，类是模块化的和命名空间的，选择器具有低特异性，并且可以在 CSS 预处理器之上使用允许缩放 CSS 的类来切换状态，以使代码更简洁和更具表现力。

综上所述，我将使用以下 BEM 标准:

• 用连字符连接的类名作为 block :
  foo-bar
• block 名称后跟 __ 后跟元素的带连字符的类名:
  foo-bar__fizz-buzz
• block 或元素名称后跟 -- 后跟修饰符的带连字符的类名:
  foo-bar--baz, foo-bar--baz__fizz-buzz, foo-bar__fizz-buzz--qux

BEM 缩写形式:block-name__element-name--modifier-name

---

您的示例中包含三个不同的 block :

1. sidebar，它有一个 sidebar__nav 元素
2. content，它有一个 content__nav 元素
3. nav，它有 nav__item 和 nav__link 元素

sidebar 和 content block 似乎是同一 block 的变体，可以表示为 .region.region--sidebar和 .region.region--content。

nav block 隐含在 ul 元素中，您应该将其显式化:

<ul class="nav"><!-- could be content__nav or sidebar__nav as well if you choose -->
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>

一旦您指定 ul 元素是一个 nav block ，就可以修改 nav block :

<ul class="nav nav--content">
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
</ul>

设置 CSS 类后，所有 nav__item 元素的样式很简单:

.nav__item {
    ...styles here...
}

并覆盖内容 nav__item 元素的那些样式是:

.nav--content__item {
    ...styles here...
}