BEM--CSS命名规范

什么是BEM

BEM其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块儿的命名）。命名约定的模式如下：

.block{}
.block__element{}
.block--modifier{}

• block 代表了更高级别的抽象或组件
• block__element 代表 block 的后代，用于形成一个完整的 block 的整体
• block--modifier代表 block 的不同状态或不同版本(常用作修饰)

BEM的优势

BEM的关键是光凭class名字就可以让其他开发者知道某个标记用来做什么的，明白各个模块之间的关系，例如如下的命名：

.nav{}
.nav__item{}
.nav--blue{}

很明显最顶级块为nav，它有子元素如item，item又有一些属性，例如blue;这样的命名比我们平时的命名优势在于能够一眼看出各个css之间的关系。
再比如一个搜索模块，平时的写法是：

<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

BEM的写法为：

<form class="site-search  site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>

BEM与SCSS的关系

现在的开发很多时候都会用到SCSS，那么如果使用SCSS的嵌套写BEM规范呢，在SCSS中可以使用@at-root：

.block {
  @at-root #{&}__element {
  }
  @at-root #{&}--modifier {
  }
}

/*生成的css*/
.block {
}
.block__element {
}
.block--modifier {
}

非常的方便。