CSS命名之姓氏命名法（转）

背景：

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

命名原则：

1.概述

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

 

1.2说明：

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

如：

banner
├── banner_img
└── banner_opition

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

如：

floor
├── floor_ad
|    |
|    ├── floor_ad_ul
|    └── floor_ad_li
|
├── floor_tag
|    |
|    ├── floor_tag_ul
|    └── floor_tag_li

(3).子模块中，可以嵌套其他模块，可理解为“娶了媳妇、嫁了郎”

如：

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

 

1.2.层级：

页面结构层（以“ic_”开头）

工具条                               ic_toolbar

头部                                   ic_header

主体内容                          ic_content

指引信息|快速入口       ic_footer

版权信息                         ic_subfooter

 

布局层（以“grid_c”开头）

行：

grid_c1（一列）

grid_c2a（两列，侧栏/主要区域）

grid_c2b（两列，主要区域/侧栏）

grid_c3a（三列，侧栏/主要区域/扩展栏）

列：

gird_s（侧栏，定宽）

grid_m（主体区域，自适应宽度）

grid_e（扩展栏，定宽）

 

模块区域

全站公共模块

以”mod_“开头，如：mod_goods

业务公共模块

以”业务名_mod_“开头，如：sy_mod_f

私有模块

任意单个单词或拼音，如：f1、slider

 

案例分析（以首页楼层1为例）

截图示意：

代码分析：

建议

1.减少DOM层级和元素

按照现有结构，为提高渲染效率，建议基于ic_content之后，层级最多不能超过8层

 

2.减少ClassName层级

建议不要超过4级，如：vip_mod_banner_lists

如果层级确实较多，命名可能会较长，可以采用如下方式进行简化：

vip_mod_banner_lists_name -> vip_mod_banner_lname

 

3.减少直接定义标签样式

因浏览器从右向左遍历解析，为提高渲染效率，建议减少定义标签，通过添加class来定义样式，如：vip_mod_banner_lists_li

 

4.避免空class

 

5.禁用通配符

 

原文地址：http://www.ghugo.com/css-name/

转载于:https://www.cnblogs.com/xzhang/articles/4173548.html