2020年你还没用BEM？

当你看到一个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-block
• 尽量不使用id选择器