css框架命名规范

作者：泡泡
链接：https://www.zhihu.com/question/54962942/answer/142062359
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

由历史原因及个人习惯引起的DOM结构、命名不统一，导致不同成员在维护同一页面时，无从下手，效率低下，迭代、维护成本极高。

命名原则：

1.概述

1.1基于姓氏命名法（继承+外来），如下图：

1.2说明：

(1).简单模块：在子孙模块数量可预测的情况下，继承祖先模块的命名前缀

如上图的焦点图轮播模块，模块整体结构比较简单，子元素的内容相对较少，这种情况下，假设将模块命名为 ： slider，那么其后续的所有子元素，均需要继承这个类名。

slider
├── slider-list
|    |
|    └── ....
└── slider-nav
|    |
|    └── ....

(2).复杂模块：当子孙模块数量较多，且无法预估时，可以选择采用继承“祖先+父”模块的命名前缀，以保证模块之间的独立性

在上图的模块中，一个大楼层里面包含一个子模块：tab切换。在这种结构复杂的模块中，为了保证模块类名使用简单（css起名也是一个体力活）和结构看起来更清晰，可以使用继承“祖先+父”模块的命名前缀的方式。

在这个楼层模块中，楼层的名字叫：floor ，里面的tab切换单个内容块名字叫 item，那么 tab切换内部的子元素命名规则为 ： floor-item-xxx

如：

floor
├── floor-hd
|    |
|    ├── floor-tit
|
├── floor-item
|    |
|    ├── floor-item-tit
|    └── floor-item-desc

上面代码中使用了2次 tit 来表示标题，也就是说如果你自己有一组命名包，你就可以很轻松的进行命名了，比如描述相关：desc、info、extra等等。

(3).复合模块：子模块中，可以嵌套其他模块，可理解为“娶媳妇”

模块间本身会有嵌套情况，如上面的结构，在今日特惠这个模块中嵌套了一个公共组件。可以理解为娶媳妇。（媳妇一般是外姓的）。

如：

hotsales
├── hotsales_li
| |
| └── mod_goods
| |
| ├── mod_goods_price
| └── mod_goods_tit
| └── mod_goods_promo

当然，其实第二点也可以用第三点的方式来实现，那么这里就涉及到一个问题？什么时候用第三点提到的方法。

比较推荐的建议是，如果嵌套的模块是一个比较通用的组件，那么可以用第三点，将子模块抽出成一个独立的组件，而其他情况下建议使用第二点的方式。

基于以上的方式，可以完成基本的命名规则，但是无法区分模块的类型。（模块是否可复用？复用范围？）

于是我们在模块的命名规则上遵循以下原则：

1. 全站公共模块以”mod-”开头
   
2. 页面公共模块以”xx-mod-”开头（xx为页面名称缩写）
   
3. 独立模块，命名为一个简短的单词，如”hot、floor、banner” 等
   

基于以下2点来区分全站公共模块及页面模块。

1. 同一个页面出现2次及以上同一个类名
   
2. 2个以上页面出现同一个类名
   

在这种规则下，可能会出现这个模块原先是独立模块的，然后发现可以复用了，然后就修改类名变成公共模块。这种变更成本比较低，可接受。（因为独立模块在页面上只有一处，修改类名不会影响到其他样式）

基于这个css姓氏命名法，我们的类名是长命名的方式了，只要保证了最外层模块的唯一性，那么里面的子模块类名是不可能会出现重复的。
于是，我们要求 ，CSS以单层命名为主，嵌套一般不能操过3层。


这样在修改样式与html结构时，相互之间是耦合的，css不依赖于html的结构。（我知道很多同学写less或scss喜欢像html那样一层一层嵌套）

最后附上以前feeling写的代码给大家参考：