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