CSS规范之 BEM

不论是为团队考虑，还是后续的维护，规范CSS命名真的很重要！

这里介绍CSS命名规范中的其中一个：BEM。
先贴上一个关于BEM规范的示例网站：https://9elements.com/bem-cheat-sheet/#form-blocks

BEM简介

BEM，全称：Block（块）、Element（元素）、Modifier（修饰符）。由Yandex（俄罗斯本地搜索引擎）公司提出的，适用于组件化开发模式。

优缺点

缺点是写法难看，但是他的好处远远超过它外观上的那点瑕疵。难点是要明确作用域是从哪里开始到哪里结束，以及什么时候使用或不使用它。随着不断使用的经验积累，我们慢慢就会知道怎么用，这些问题也不再是问题。

优点是结构清晰，但有时候会产生代码冗余。为避免写太多重复性的代码，我们要学会善于利用预编译语言的（适当地使用 @include @extend 等）

命名规则

正如名字，实例一下就是：block__element–modifier

block（B）：块，每一个块是一个独立的功能，块之间可以相互嵌套。

• 命名可以由多个单词组成，每个单词之间以 - 链接，如：main-nav
• block 的作用只是起到一个隔离的作用，一般不会在 block 里面实现具体组件的样式，对于块修饰样式比如尺寸，位置可以通过 modifier 设置
• block 与 modifier 之间通过 – 链接

element（E）：元素，依赖于块存在，不能独立存在，必须嵌套在块内部。

• 命名可以由多个单词组成，每个单词之间以 - 链接
• element 样式必须依赖 block 存在，element 是 block 的具体实现，block 与 element 之间通过 __ 链接
• element 里面可以定义每个 element 自身的样式，对于 element 修饰样式比如尺寸、状态可以通过修饰符设置
• element 与 modifier 之间通过–链接

modifier（M）：修饰符，对于E或B的状态和外观进行修饰。

• 命名可以由多个单词组成，每个单词之间以-链接
• modifier 可以修饰 block 和 element 的状态、行为、尺寸等

注意
1.不推荐采用标签或者id作为选择器，应采用类名作为选择器。
（1）id因为权重的问题，而且针对于spa的项目会出现id的重复情况；
（2）标签选择器当我们需要修改组件解构的时候，同时还需要维护组件样式；
2.不推荐使用并列选择器，应使用修饰符来实现。
3.不推荐使用伪类选择器，应使用修饰符来实现。
4.不推荐使用全局的css样式比如rest.css、common.css。但是针对于一些格式化的样式还是可以使用，一切目的都是为了方便维护。

实例

例1：

扫描二维码关注公众号，回复： 15261035 查看本文章

<div class='main-nav'>
    <span class='main-nav__item qf-rate__item--active'></span>
    <span class='main-nav__item'></span>
</div>

例2:

<ul class='list'>
    <li class='list__item'>1</li>
    <li class='list__item'>
        <ul class='list list--second'>
            <li class='list__item list__item--seconed'></li>
        </ul>
    </li>
</ul>

还有其他CSS规范，如SMACSS、OOCSS等，后续贴上。