什么是BEM
BEM其实是块（block）、元素（element）、修饰符（modifier）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块儿的命名）。命名约定的模式如下：
.block{}
.block__element{}
.block--modifier{}
-
block代表更高级别的抽象或组件 -
block__element代表block的后代，用于形成一个完整的block的整体 -
block--modifier代表block的不同状态或不同版本
常用规范
-
blockelementmodifier包含多个单词时, 用一个中划线-链接,如
-
el-dropdown-menuel-button
-
block和element用双下划线__链接, 例
- 表单项
form__item - 导航项
menu__item
-
element和modifier用双中划线--链接, 如表示按钮的不同状态,
- 默认：
el-button--default - 成功：
el-button--success
- 用js控制样式时,css命名用
is-开头,如
-
is-successis-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的组件命名, 开发控制台, 在控制台查看组件的命名。
