css命名规范-BEM

什么是BEM

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

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

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

常用规范

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

• el-dropdown-menu el-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

例如，写一个下拉菜单，参考element-ui

<div class="el-dropdown">
    <span>下拉菜单
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <ul class="el-dropdown-menu">
        <li class="el-dropdown-menu__item is-diasbled">选项一</li>
        <li class="el-dropdown-menu__item el-dropdown-menu__item--divided">选项二</li>
    </ul> 
<div>

常用的block、element、modifier命名

• 参考element-ui的组件命名, 开发控制台, 在控制台查看组件的命名。