BEM规范：css命名规范

目录

 

什么是BEM

BEM的实例

eg1

eg2

BEM与SCSS

---

什么是BEM

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

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

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

block代表一个组，而element代表组里面的成员

BEM的实例

eg1

//普通命名

.nav{}
.item{}
.blue{}

//BEM命名

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

eg2

//常规

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