BEM 命名法

【前言】
BEM 是一个简单又非常有用的命名约定。让前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密.这里主要介绍了CSS BEM 命名规范简介

1，为什么要用 BEM 命名法

• 样式隔离, 避免css样式污染
• 代码更易覆盖
• 代码更易读

css 样式污染的根本原因，是因为css没有作用域。BEM通过特殊的命名方式，给css创造一个“作用域”，就能有效避免css样式全局污染。例如上面的例子,给输入框命名
普通的命名法, 会作用于所有class='content' 的后代元素。 本来你只想给当前元素加样式，结果不小心影响了其他元素，这就是样式污染。
BEM命名法，只会作用于class='content-input__inner'的元素, 达到样式隔离。 不会影响其他元素。

# 普通
.content input {}

# BEM命名法
.content-input__inner {}

2，什么是 BEM 命名法？

BEM其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块的命名）。命名约定的模式如下：

.block{}
.block__element{}
.block--modifier{}

• block代表更高级别的抽象或组件
• block__element代表 block的后代，用于形成一个完整的block的整体
• block--modifier代表block的不同状态或不同版本

常用规范

1，block element modifier包含多个单词时, 用一个中划线-链接,例如

el-dropdown-menuel-button

2，block和element用双下划线__链接, 例如

表单项 form__item
导航项 menu__item

3，element和modifier用双中划线--链接, 如表示按钮的不同状态,例如

默认：el-button--default
成功：el-button--success

4，用js控制样式时,css命名用is-开头,例如

is-success、is-failed、is-disabled

常用的元素名

• 表单元素 ：form form-item input select radio checkbox switch rate datePicker
• 导航元素：nav subnav menu tab
• 提示： alert message messageBox notification
• 数据展示： table process tree pagiantion
• 其他： button icon

3. 如何用好BEM命名法

案例：

<div class="box">
    <div class="box__header">
        <h2 class="box__title">标题</h2>
    </div>
    <div class="box__body">
        <div class="box__content">
            内容
        </div>
        <button class="button button--state-danger">
            Danger button
        </button>
    </div>
</div>

常见的优化

避免 .blockel1el2

// bad
<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem1__elem2'>
            <div class='block__elem1__elem2__elem3'></div>
        </div>
    </div>
</div>

// good
<div class='block'>
    <div class='block__elem1'>
       <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

modify 影响元素的写法

避免⽤ block-name–-modifier-name__element-name 的写法

// bad
<div class="block block--xmas">
    <button class="block__btn block--xmas__btn"></button>
</div>

// good
<div class="block block--xmas">
    <button class="block__btn"></button>
</div>

.block--xmas .block__button {
/* Jingle bells, jingle bells, jingle all the way.*/
}

组件下的组件

避免⽤ block-name__block2-name 的写法

// bad
<div class='block'>
    <div class='block__block2'>
        <div class='block__block2__elem'>
        </div>
    </div>
</div>

// good
<div class='block'>
    <div class='block2 block2--modifier'>
        <div class='block2__elem'>
    </div>
</div>