最近在写代码样式的时候经常会考虑命名的写法和规范注意，一直认为前端开发者写一个好的代码不仅仅只是写一些可用的 JavaScript 的片段，而是也要注意 CSS 的样式处理和规范，如果在样式上不注意稍有不慎就会让你的页面出现奇怪的问题，当然命名的规范也是必要的，为了统一和后续的维护都有重要的意义，下面就是我在写的时候结合前人的思路总结自己可用的代码命名规范，经供参考。

关于 CSS 的规范命名有很多种方式，其他的这里不多说，有一种 BEM 方式最多的也是我一直在用的规范。

BEM 是块（block）、元素（element）、修饰符（modifier）的简写。

优点是：主次有序，独立样式，可直接选择类名设置样式，不需多层嵌套，提高性能

缺点是：类名很长，看起来臃肿

就 BEM 的特点写一个小的示例；

<div class="example">
  <header class="example-header">
    <div class="example-container">
      <span class="example-container__btn">
        <i class="example-icon"></div> 首页
      </span>
      <span class="example-container__btn_middle"></span>
      <span class="example-container__btn_mini"></span>
    </div>
    <div class="example-other"></div>
  </header>
  <footer class="example-footer"></footer>
</div>

看上面示例可知：

  1. 最外层是有一个唯一标识的类名 example
  2. 子元素对应的元素都加上标识的前缀后面跟一个 - 杠
  3. 对应的子类元素的类名都是加一个 - 杠的写法
  4. 当子元素下的元素是修饰元素时，连起来后面加 __ 两根下划线
  5. 如果需要描述性的字符则加在最后，用上 _ 单下划线表示修饰单位

其中：

  • - 表示相邻的两个块状或者多个
  • __ 表示块状下面的子元素
  • _ 表示元素的修饰符

这么说可能不好理解，换个方式表述一下，拿一个图文列表来说；

WX20220606-143702@2x

块（block）

一个块是设计或布局的一部分，它有具体且唯一地意义 ，要么是语义上的要么是视觉上的。

在大多数情况下，任何独立的页面元素（或复杂或简单）都可以被视作一个块。它的HTML容器会有一个唯一的CSS类名，也就是这个块的名字。

针对块的CSS类名会加一些前缀（ ui-），这些前缀在CSS中有类似命名空间的作用。

一个块的正式（实际上是半正式的）定义有下面三个基本原则：

  1. CSS中只能使用类名（不能是ID）。
  2. 每一个块名应该有一个命名空间（前缀）
  3. 每一条CSS规则必须属于一个块。

一个列表的里面的每一个图文就是一个 block 对应到的自定义类名就是 .list ，对应的写法就是

.list {}

元素（element）

块中的子元素是块的子元素，并且子元素的子元素在 bem 里也被认为是块的直接子元素。一个块中元素的类名必须用父级块的名称作为前缀。

就如图文中的左右布局，对应的写法就是

.list .list-left {}
.list .list-right {}

图文中右侧的内容居多，有多层嵌套的的布局，也可使用 .list-xxx 来命名，例如

.list .list-right .list-header {}
.list .list-right .list-main {}
.list .list-right .list-footer {}

修饰符（modifier）

一个“修饰符”可以理解为一个块的特定状态，标识着它持有一个特定的属性。

用一个例子来解释最好不过了。一个表示按钮的块默认有三个大小：小，中，大。为了避免创建三个不同的块，最好是在块上加修饰符。这个修饰符应该有个名字（比如：size ）和值（ small，normal 或者 big ）。

比如图文上的字体颜色和按钮的大小，例如

.list .list-right .list-main .list-price__red {}
.list .list-right .list-main .list-btn__small {}
/* 后面跟一个状态修饰 */
.list .list-right .list-main .list-btn__small_active {}

书写原则

一般来说书写的子集不超过三级，可控返回内的 xx-item__btn_active 或者 xx-item-price__btn_active

完整例子

<div class="list list_active">
  <div class="list-left">
    <img class="list-pic" src="" alt="">
  </div>
  <div class="list-right">
    <div class="list-header"></div>
    <div class="list-main">
      <div class="list-des">
        <div class="list-des-price"></div>
        <div class="list-des-price__small"></div>
      </div>
      <div class="list-label">
        <div class="list-label-btn"></div>
        <div class="list-label-btn__none"></div>
      </div>
    </div>
    <div class="list-footer"></div>
  </div>
</div>

除了命名的长度长一点，这种的书写方式还是很实用的，既能做到元素之间的样式隔离不被污染，还能降低组件样式的冲突。

本文部分参考：CSS BEM 书写规范