当你看到一个class的时候,你想得到什么?
- 这个class用在什么地方,作用是什么?
- 是否在其他地方也有使用该class,修改会不会引起其他地方的样式问题?
- class 是否在js中被使用?
- 等等等等
此时,你最想一眼看到这个class就解决以上所有的问题,那么就引入了今天的主题 BEM—css命名规范
当你第一次看到css包含着-、__、–、- 这些乱七八糟的字符时,脸上笑嘻嘻,心里***。当我第一次看到这样的css的时候,我也没法冷静的看完,但是当你在工作中使用这些css命名规范的时候,不知不觉你会发现,这些符号带来的优势,要远比多写几个字符要多的多
BEM介绍
- BEM,它代表 block , element 和 modifier ,blcok可以理解成独立的块,在页面中该块的移动并不会影响到内部样式(和组件的概念类似,独立的一块),element就是块下面的元素,和块有着藕断丝连的关系,modifier是表示样式大小等
- BEM是一种非常有用,功能强大且简单的命名约定,它使您的前端代码更易于阅读和理解,易于使用,易于扩展,更健壮和明确,并且更加严格。
- BEM方法可确保参与网站开发的每个人都使用单一代码库,并且使用相同的语言。使用正确的命名将使您为网站设计的更改做好准备。
- BEM可以用于js中,在JavaScript中并进行模板化,但是需要特殊的框架(暂不深入探索)
BEM的写法
- block__element–modifier 或者 block__element_modifier(个人更倾向于第一种写法)
- 单词之间使用(-)分隔(file-name)
- 元素名称通过双下划线(__)与块名称分隔(block__element)
- 修饰符名称通过单个下划线(–)与块或元素名称分隔,也可以使用_(block–modifier / element–modifier)
这部分是elementUI部分代码写法,使用的也是BEM写法
<div class="el-row">
<button class="el-button el-button--primary">主要按钮</button>
<button class="el-button el-button--success">成功按钮</button>
<div class="el-row__wrap>
<p class="el-row__wrap--bar"></p>
</div>
</div>
注:
- BEM方法中不存在元素的元素,即block-blo