BEM 块、命名和嵌套

我正在尝试了解 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 样式，我会遇到问题，它们出现在我的两个导航中，并且不应该具有相同的样式。我应该在这里做一些嵌套，还是我命名我的块和元素错误？

CSS 中的嵌套示例：

.content__nav .nav__item { background: Red; }

或者我应该这样命名：

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

你能帮我吗？

关于如何编写 BEM 类有多种变体，因此请注意存在多个相互竞争的标准。它最初是一套松散的指导方针。自从发布这个答案以来，Yandex 大幅修改了其官方标准 https://en.bem.info/（这是一个很大的进步）。我使用的 BEM 版本主要基于尼古拉斯·加拉格尔的文章 http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/.

此时我使用“原子无泄漏” http://www.sitepoint.com/atomic-oobemitscss/，这实际上只是一种说法，类是模块化和命名空间的，选择器具有低特异性，状态可以通过类进行切换，从而允许在 CSS 预处理器之上缩放 CSS，以使代码更加简洁和富有表现力。

尽管如此，我将使用以下 BEM 标准：

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

BEM 简写形式：block-name__element-name--modifier-name

您的示例中有三个不同的块：

1. sidebar，其中有一个sidebar__nav element
2. content，其中有一个content__nav element
3. nav， 其中有nav__item and nav__link元素

The sidebar and content块似乎是同一块的变体，可以表示为.region.region--sidebar and .region.region--content.

The nav块是隐式的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块，这是有道理的nav块被修改：

<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 类、样式后all nav__item元素很简单：

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

并覆盖内容的这些样式nav__item元素是：

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