【再学前端】什么是CSS BEM命名规范？

在读element源代码的时候, 了解到了BEM的命名风格.

一、什么是 BEM

BEM是Block（块）、Element（元素）、Modifier（修饰符）的简写。它是一种组件化的 CSS 命名方法和规范。

BEM 规范视图将整个用户界面分解成一个个小的可重复使用的组件。

使用BEM主要是为了将用户界面划分成独立的块，使开发更为简单和快速，有利于团队协作，方便维护。

Block

Block是一个功能独立的页面组件，可重复使用，也支持嵌套。我们可以认为网页都是由 ”块“ 构成的。

每个块的块名必须是唯一的，用于明确指出它所描述的是哪个块。例如某个块的名字为head，那我们就能够根据这个块名推测出这应该是一个头部块，位于网页的头部。
块应该是独立的，当在页面中添加，删除，或者是移动某个块时，不需要对块进行修改（我的理解是块的名称以及css样式都不需要更改）。

Element

元素是块的组成部分，是依赖上下文的。
元素的名称用于描述它是什么，而不是它的状态。
元素在所属的块中指定位置时，才能表现出应有的功能。
元素之间可以彼此嵌套，一个元素总是一个模块的一部分，而不是另一个元素的一部分，这意味着元素的名称不能被定义为 blockelem1elem2 这样的层次结构。

示例：

<div class="top">
    <!--top块中的search-for块-->
    <form class="search-form">
        <!--在search-form块中的input元素-->
        <input class="search-form__input"> 
        <!--在search-form块中的button元素-->
        <button class="search-form__button">搜索按钮</button>
    </form>
</div>

对应css代码：

.search-form .search-form__input{...}
.search-form .search-form__button{...}

Modifier

修饰符可以与块、元素一起工作。我们经常需要在已经定义好的块或者元素上，做一些小调整来满足特定的小功能。通常是外观或行为有些许改变，这时可以使用修饰符来处理。注意，修饰符不能单独使用，而且必须绑定在对应的块或元素上，不能混搭。

为什么修饰符一定要包含块名或元素名呢？

因为每一个块都会建立独立的命名空间，可以有效的减少命名冲突。
可以显示说明该修饰符所对应的块或元素，防止混淆。
不包含块名或元素名，使用修饰符就必须使用组合选择器，这会增加样式权重使其难以覆盖。

示例：

<div class="banner__btn">
    <button class=".button .banner__btn--red"></button>  
    <button class=".button .banner__btn--green"></button>
    <button class=".button .banner__btn--blue"></button>   
    <button class=".button .banner__btn--yellow"></button>       
</div>

css代码：

.banner__btn--red { background-color: red; }
.banner__btn--green { background-color: green; }
.banner__btn--blue { background-color: blue; }
.banner__btn--yellow { background-color: yellow; }

二、BEM可以帮助我们解决什么问题

提高css的可维护性，
减少样式冲突，
优化css代码，
仅从名字就能知道一个 CSS 选择器具体做什么
从名字能大致清楚一个选择器可以在哪里使用
从 CSS 类的名称可以看出它们之间的联系

三、命名规则

BEM命名规则 : block-neme__elment-name--modifier-name，也就是模块名 + 元素名 + 修饰器名

使用 BEM 命名规范，理论上讲，每行 css 代码都只有一个选择器。 BEM代表 “块（block）,元素（element）,修饰符（modifier）”,我们常用这三个实体开发组件。在选择器中，由以下三种符号来表示扩展的关系：

-   中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
--  双中划线线：用来描述一个块或者块的子元素的一种状态
__  双下划线：双下划线用来连接块和块的子元素

type-block__element--modifier

四、BEM的缺点

BEM主要被诟病的一点在于其命名过长。整个HTML看起来会更混乱；

其实说穿了，BEM保证样式不冲突的核心就是：在元素名中加入唯一的标识

Samgao0312 / Blog