BEM的命名规范

BEM的命名规范
基本概念
css 的命名规范⼜叫做BEM规范，为的是结束混乱的命名⽅式，达到⼀个语义化的css命名⽅式。

BEM是三个单词的缩写：Block（块）代表更⾼级别的抽象或组件，Element（元素） Block的后代，以及Modifier（修饰）不同状态的修饰符。

命名⽅法：
.block__element--modifier {
display: flex;
}
.block--modifier {
display: flex;
}
.block__element {
display: flex;
}
<p class="header">
<p class="header__body">
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
通过BEM的命名规范我们可以达到⼀个什么⽬的呢？就是有⼀个清晰的描述，从上⾯的代码中我们可以看到⼀层⼀层的清晰明了，⽽且有⼀个清晰的结构。

1 block
block 代表⼀个更⾼级别的抽象或者是⼀个组件，它仅仅作为⼀个边界。

它主要的功能有下⾯三点：
负责描述功能的，不应该包含状态。

/* correct */
.header {
}
/* wrong */
.header--select {
}
不影响⾃⾝布局，不包含具体的样式，也就是block⾥⾯不应该加样式
/* correct */
.header {
}
/* wrong */
.header {
margin-top: 50px;
}
不能使⽤元素选择器和ID选择器
/* correct */
.header {
}
/* wrong */
.header a {
margin-top: 50px;
}
2 Element
是⽤⼀个双下划线隔开
/* correct */
.header__body {
margin-top: 50px;
}
/* wrong */
.header .body {
margin-top: 50px;
}
表⽰的是⽬的，⽽不是状态，如下例⼦：⽬的是在header下⾯定义三个区域 body、logo、title，但是并没有指定任何状态。

.header__body {
margin-top: 50px;
}
.header__logo {
margin-top: 50px;
}
.header__title {
margin-top: 50px;
}
不能脱离Block⽗级单独使⽤
/* correct */
<p class="header">
<p class="header__body">
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
/* wrong */
<p>
<p class="header__body">
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
3 Modifier
表⽰的是⼀个状态，是⽤双横杠分开的。

.header__button--default {
background: none;
}
Boolean
.header__button--select {
background: none;
}
枚举
.header__button--primary {
background: #329FD9;
}
不能单独使⽤
/* correct */
<p class="header">
<p class="header__body">
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
/* wrong */
<p>
<p>
<button class="header__button--primary"></button>
<button class="header__button--default"></button>
</p>
</p>
BEM在预处理器语⾔中的使⽤
在Sass中的使⽤
.header {
&__body {
padding: 20px;
}
&__button {
&--primary {
background: #329FD9;
}
&--default {
background: none;
}
}
}
在Less中的使⽤
@classname: header;
.@{classname} {
.@{classname}__body {
padding: 20px;
}
.@{classname}__button {
.@{classname}__button--primary { background: #329FD9;
}
.@{classname}__button--default { background: none;
}
}
}。