CSS类名命名规范

参考：https://www.w3cplus.com/css/css-architecture-1.html（推荐） 或 https://blog.csdn.net/eunice_sytin/article/details/83341381 (推荐) 或 https://zhuanlan.zhihu.com/p/122214519

大部分的 UI 库都是使用这种命名方式的，element-ui的css类名就是使用这种规范命名的

一、BEM命名规范：

　　BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。

• 块：一个块就是一个组件。
• 元素：元素是块的子节点。为了表明某个东西是一个元素，你需要在块名后添加 __element。所以，如果你看到一个像那样的名字，比如 form__row ，你将立即知道 .form 块中有一个 row 元素。
• 修饰符：修饰符是改变某个块的外观的标志。要使用修饰符，可以将 --modifier 添加到块中。

 　  记忆方法：BEM之间层级之间使用  双下划线 或 双中划线 连接。一个长单词用短中划线拼接。

二、优化 BEM命名 的使用

 使用BEM命名方式，如果按照常规的方法给元素添加类名，可能就需要加几个类名，如：

<button class="button">Primary button</button>
<button class="button button--secondary">Secondary button</button> 

.button { padding: 0.5em 0.75em; background-color: red; } 
.button--secondary { background-color: green; }

这样写元素上就要多写类名，我们肯定希望像下面这样的写法：

<button class="button">Primary button</button>
<button class="button--secondary">Secondary button</button> <!-- 这里只有一个button--secondary类名，而不用再加一个button类名  -->

• 实现方法1：使用 mixin【需要css预处理器】  https://www.w3cplus.com/css/css-architecture-1.html

  @mixin button { 
      padding: 0.5em 0.75em; 
  } 
  .button { 
      @include button; 
      background-color: red; 
  } 
  .button--secondary { 
      @include button; 
      background-color: green; 
  }

• 实现方法2：使用 CSS 属性选择器

  [class*='button']:not([class*='button__']) { 
      padding: 0.5em 0.75em; 
  }