Css BEM 块、命名和嵌套

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

在这一点上，我使用了"Atomic OOBEMITLESS"，这实际上只是说明类是模块化的和命名空间的， Select 器的专用性很低，状态可能与允许CSSzoom 的类一起切换，在CSS预处理器的顶部，以使代码更简洁和更具表现力.

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

• hyphenated class names as blocks:
  foo-bar
• block name followed by __ followed by hyphenated class names for elements:
  foo-bar__fizz-buzz
• block or element names followed by -- followed by hyphenated class names for modifiers:
  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块.

ul元素中的nav挡路是隐含的，您应该将其显式地表示出来:

<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...
}