BEM思想（css命名规范）

在团队开发中，由于缺乏规范，样式管理一直是开发中的痛点，样式污染，难以定制化，依赖性高，各种问题层出不穷。

而BEM是一个非常有用，强大，简单的命名约定，可以让你的前端代码更容易阅读和理解，更容易协作，更容易控制。

当然，通常人们会认为BEM写法难看，但是他的好处远远超过它外观上的那点瑕疵。

1. BEM命名约定

BEM：块（block）、元素（element）、修饰符（modifier）

命名约定的模式

.block{}

.block__element{}

.block--modifier{}

1

2

3

其中块可以用单个连字符来界定：如

.site-search{} //块

.site-search__field{} //元素

.site-search--full{} //修饰符

1

2

3

2. 如何使用BEM

Block:一个独立的，可以复用而不依赖其他组件的部分，可作为一个块

Element:属于块的某部分，可作为一个元素

Modifier:用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器

1）保证各个部分只有一级B__E–M，修饰器需要和对应的块或元素一起使用，避免单独使用。

2）仅以类名作为选择器，不使用ID或标签名来约束选择器，且css中的选择器嵌套不超过2层

3）避免 .block__el1__el2 的格式

如：

//css为例

<p class="article">

<p class="article__body">

<p class="tag"></p>

<button class="article__button--primary"></button>

<button class="article__button--success"></button>

</p>

</p>

//less为例

.article {

max-width: 1200px;

&__body {

padding: 20px;

}

&__button {

padding: 5px 8px;

&--primary {background: blue;}

&--success {background: green;}

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

BEM 规范虽然结构比较清晰，但有时候会产生代码冗余。

为避免写太多重复性的代码，我们要学会善于利用预编译语言的（适当地使用 @include @extend 等）

3. 总结：

BEM 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它。随着不断使用的经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。