基本概念
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; } } }