什么是 BEM 命名规范
Bem 是块（block）、元素（element）、修饰符（modifier）的简写
- 块: 组件
- 元素：块的子节点
- 修饰符：改变某个块的外观的标志，不同状态或不同版本
Yandex中文：燕基科斯 提出的一种前端 CSS 命名方法论
BEM的关键是，可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。于是，通过查看 HTML 代码中的class 属性，就能知道元素之间的关联。
BEM 命名模式
- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态
.block {}
.block__element {}
.block--modifier {}
block 代表了更高级别的抽象或组件。
block__element 代表.block 的后代，用于形成一个完整的 .block 的整体。
block--modifier 代表.block 的不同状态或不同版本。
使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定
每一个块(block)名应该有一个命名空间（前缀）
sub就是 前缀
.sub-block__element {}
.sub-block--modifier {}
什么时候应该用 BEM 格式
并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。
比如只是一条公共的单独的样式，就没有使用 BEM 格式的意义：
.hide {
display: none !important;
}
在 CSS 预处理器中使用 BEM 格式
BEM的一个槽点是，命名方式长而难看，书写不雅。相比BEM格式带来的便利来说，我们应客观看待。而且，一般来说会使用通过
LESS/SASS等预处理器语言来编写CSS，利用其语言特性书写起来要简单很多
以 LESS 为例：
.article {
max-width: 1200px;
&__body {
padding: 20px;
}
&__button {
padding: 5px 8px;
&--primary {background: blue;}
&--success {background: green;}
}
}
// 或者
@classname: header;
.@{classname} {
.@{classname}__body {
padding: 20px;
}
.@{classname}__button {
.@{classname}__button--primary {
background: #329FD9;
}
.@{classname}__button--default {
background: none;
}
}
}
在Sass中的使用
.header {
&__body {
padding: 20px;
}
&__button {
&--primary {
background: #329FD9;
}
&--default {
background: none;
}
}
}
在流行框架(VUE、REACT)的组件中使用 BEM 格式
- 在当前流行的
Vue.js 、 React 、 Angular等前端框架中，都有CSS 组件级作用域的编译实现，其基本原理均为利用CSS 属性选择器特性，为不同的组件生成不同的属性选择器。 - 当你选择了这种局部作用域的写法时，在
较小的组件中，BEM格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推荐使用BEM格式。 - 另外，对于
对外发布的公共组件来说，一般为了风格的可定制性，都不会使用这种局部作用域方式来定义组件样式。此时使用 BEM 格式也会大显其彩。
避免 .block__el1__el2 的格式
在深层次嵌套的 DOM结构下，应避免过长的样式名称定义。
层级最后
不要超过 4 级，不然增加阅读的理解难度
//常规写法：
.xxx{}
.xxx__item{}
.xxx__item_current{}
//常规 嵌套写法
.xxx__item_current .mod-xxx__link{}
//BEM推荐：
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}
// 嵌套写法
.xxx__item_current{
.xxx__link{}
}
//对应的HTML结构如下：
<ul class="xxx">
<li class="xxx__item">第一项
<div class="xxx__product-name">我是名称</div>
<span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>
<a href="#" class="xxx__link">我是link</a>
<li>
<li class="xxx__item xxx__item_current">第二项 且 当前选择项
<div class="xxx__product-name">我是名称</div>
<a href="#" class="xxx__item-link">我是link</a>
<li>
<li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮
<div class="xxx__product-name">我是名称</div>
<a href="#" class="xxx__item-link">我是link</a>
<li>
</ul>
