CSS命名之姓氏命名法

背景:

由历史原因及个人习惯引起的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写的代码给大家参考:

发表评论

电子邮件地址不会被公开。 必填项已用*标注