BEM命名规范使每个元素的名字都是独一无二的,使不同元素的样式不会相互干扰,使开发组件变得更加轻松;
1、BEM的基本规则:
block__element_modifier
- 模块(block):独立的实体;
- 元素名(element):block的一部分;
- 修饰器(modifier):用来改变block和element的行为和状态;
2、使用BEM命名规范的例子
很多大公司都使用BEM命名规范,比如微信的 weui :
weui-cell__bd_in-select-before
/*
we-ui:模块名
bd:元素名
in-select-before:修饰器名
*/
3、使用BEM命名规范的注意事项
- block是广义上的模块,header、image、text都可以划分为模块;
- BEM 最多只有 B+E+M 三级
- 只需要保留BEM的思想即可,连接不同部分的分隔符并不一定要使用双下划线和单下划线,使用其它符号也行;
- 用js控制的状态应该用单独的命名去区分不同的状态,因为其不应该和某个元素绑定;
eg: weui中使用js-show
表示用js控制的元素显示;