CSS的BEM规范

css的BEM规范听着陌生，但实际上我们每天都在接触它。比如在使用element-ui框架时，会发现组件上的类名都el开头：el-input、el-form、el-table、el-form-item、el-form-item__label…等等。这些看着很熟悉的类名，其实就是遵循了BEM规范。

什么是BEM规范

BEM是块（block）、元素（element）、修饰符（modifier）三个单词的缩写。以block__element–modifier 的形式命名它们，并用两个下划线和两个连字符分隔它们。
block 代表更高级别的抽象或组件
block__element 代表 block 的后代，用于形成一个完整的 block 的整体
block–modifier 代表 block 的不同状态或不同版本

<div class="block"> 
  <div class="block__element"> 
    <div class="block__element--modifier"></div>
  </div> 
</div>

背后思想是将用户界面拆分成独立的块。这使得即便在复杂UI场景下，界面开发也十分的简单和迅速，并且这套方案允许我们在不使用复制粘贴的情况下重用现有代码。

块（block）

本身有意义的独立实体。如：header、container、 menu、 checkbox、input

• 每个块被设计为独立的部分 el-form、el-input
• 区块内可以创建区块 el-form-item
• 区块名称不能重复

<form class="el-form">
  <div class="el-form-item"></div>
<form >

元素（element）

块的一部分，没有独立的含义，并且在语义上与其块相关联。如：menu item、list item,、checkbox caption、header title

• 始终存在于块中 el-form-item > el-form-item__content
• 重复的元素名称也可以 el-form-item__content和el-tabs__content是不同的含义

<form class="el-form">
  <div class="el-form-item">
    <div class="el-form-item__content"></div>
  </div>
<form >

<div class="el-tabs">
   <div class="el-tabs__content"></div>
</div>

修饰符（modifier）

用来定义块或元素的外观、状态或者行为。如：disabled、highlighted、 checked、 fixed、 size、big

• 用单下划线 _ 来分割修饰符与块或元素的命名 el-button--primary、el-tag--success

// el-alert--success 代表成功状态的alert提示样式
<div class="el-alert el-alert--success"></div>

BEM规范的优点

将页面模块化，隔离样式，提高代码的复用性，减少后期的维护成本，提供了一个简单且易于理解的css结构。