关于如何编写BEM类的方法有很多变体，因此请注意，这是多个相互竞争的标准。它起初是一组宽松的准则。自发布此答案以来，Yandex大大改进了其官方标准（这是一个很大的进步）。。

在这一点上，我使用“ Atomic OOBEMITLESS”，它实际上只是表示类是模块化和命名空间的，选择器的特异性低，状态可以用允许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元素
2. content，其中包含一个content__nav元素
3. nav，其中包含nav__item和nav__link元素

的sidebar和content块似乎是相同的块上的变化，并且可以被表示为.region.region-- sidebar和.region.region--content。

该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类之后，对 所有 nav__item元素进行样式设置就很简单：

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

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

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