BEM块，命名和嵌套

BEM块，命名和嵌套

关于如何编写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 ><!-- could be content__nav or sidebar__nav as well if you choose -->    <li ><a href="#" >link</a></li>    <li ><a href="#" >link</a></li></ul>

一旦指定

ul

元素为一个

nav

块，就

nav

可以修改该块了：

<ul >    <li ><a href="#" >link</a></li>    <li ><a href="#" >link</a></li></ul>

设置完CSS类之后，对 所有

nav__item

元素进行样式设置就很简单：

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

并为内容

nav__item

元素覆盖这些样式是：

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