高效的css命名约定

css命名规范（推荐BEM思想，非常好的规范，是由Yandex团队提出的一种前端命名方法论）

BEM由3部分组成：

• B ——— block（块）
• E ——— element（元素）
• M ——— modifier（修饰符）

命名约定的模式如下：

  <div class="block block--modifier">
      <div class="block__element"></div>
  </div>
复制代码

  .block {}
  .block--modifier {}
  .block__element {}
复制代码

这里的 block 就相当于一个模块，可以看作是命名空间，modifier 是 block 的修饰符（使用两个中划线连接）， element 是 block 下面的子元素（使用两个下划线连接）。

例1：下面的代码是定义了一个简单的头部导航，需求如下： 高亮显示当前菜单文字

  <header class="header">
    <nav class="nav">
      <a class="active" href="/" title="首页">首页</a>
      <a href="/product.html" title="产品中心">产品中心</a>
    </nav>
  </header>
复制代码

  .header .nav .active {
    color: blue;
  }
复制代码

如果按平时去写，可能会这样定义，这样写就有两点不好：

1. 如果在写后面的代码的时候也用到了 active 这个类，那可能导致样式覆盖或者冲突
2. 在定义样式的时候多层嵌套会额外增加元素查找的性能开销，虽然多层嵌套无法避免，但是能少则少

如果按照 BEM 规范去命名，则是这样：

  <header class="header">
    <nav class="header__nav">
      <a class="header__nav__a--active" href="/" title="首页">首页</a>
      <a href="/product.html" title="产品中心">产品中心</a>
    </nav>
  </header>
复制代码

  .header__nav__a--active {
    color: blue;
  }
复制代码

这样一来不仅成功避免了上面的两个问题，另一方面也增加了代码的可读性，让所以元素之间的关系变得更加紧密，如果别人熟悉 BEM 规范，那么就能很轻易的知道这段代码是什么意思，在团队协作中也能提高开发效率。

例2：利用这个规范我们也可以定义自己css公共样式:

  // 公共按钮样式
  .btn { ... } 
  .btn--lg { ... }
  .btn--sm { ... }
  .btn--xs { ... }
  .btn--round { ... }
  .btn--disabled { ... }
  .btn--primary { ... }
  .btn--success { ... }
  .btn--warning { ... }
  
  // 如果某个模块下的按钮和上面的通用按钮样式不一样，则可以继续增加样式定义
  // 分享按钮样式
  .share-btn { ... }
  .share-btn--lg { ... }
  .share-btn--sm { ... }
  .share-btn--xs { ... }
  
  // 公共标题样式
  .tit { ... }
  .tit--h1 { ... }  // 一级标题
  .tit--h2 { ... }  // 二级标题
  .tit--h3 { ... }  // 三级标题
  
  // 全局主题样式
  .global-theme--white { ... }
  .global-theme--black { ... }
  .global-theme--christ { ... }
  
  // ...
复制代码

这样的命名方式不仅看起来清爽，而且实用，方便维护。

当然也并不是所有的样式都适合用这种方式命名

比如：

1. 样式重置(reset.css)
   
2. 全局通用的的样式，比如：

  .center { text-align: center; }
  .right { float: right; }
  .left { float: left; }
  
  // ...
复制代码

这一类样式并不属于某一个模块，也没有需要修饰的地方，就是单纯的面向属性的命名。 所以在项目中还需要结合真实场景，相互结合使用。

BEM 规范可以说一种高效、强大的命名约定，虽然看起来会很长，但是压缩之后的代码的体积会小很多，同时也可以尽量精简css的命名来优化。