CSS命名规范整理

浏览数：24 / 时间：2015年06月09日

基于网易NEC修改后，整理的命名规范

单行写完一个选择器定义

便于选择器的寻找和阅读，也便于插入新选择器和编辑，便于模块等的识别。去除多余空格，使代码紧凑减少换行。

如果有嵌套定义，可以采取内部单行的形式。

分类的命名方法：使用单个字母+"-"为前缀

布局（grid）（.g-）；模块（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮肤（skin）（.s-）；状态（.z-）。

相同语义的不同类命名

方法：直接加数字或字母区分即可（如：.m-list、.m-list2、.m-list3等，都是列表模块，但是是完全不一样的模块）。

模块和元件的扩展类的命名方法

当A、B、C、...它们类型相同且外形相似区别不大，那么就以它们中出现率最高的做成基类，其他做成基类的扩展。

方法：+“-”+数字或字母（如：.m-list的扩展类为.m-list-1、.m-list-2等）。

补充：基类自身可以独立使用（如：class="m-list"即可），扩展类必须基于基类使用（如：class="m-list m-list-2"）。

选择器等级

1吨 = 行内样式style。

100斤 = ID选择器。

1斤 = 类、伪类和属性选择器。

1克 = 类型选择器和伪元素选择器。

统一语义理解和命名

语义　　　　命名
文档　　　　 doc
头部　　　　 head
主体　　　　 body
尾部　　　　 footer
主栏　　　　 main
主栏子容器 main-in
侧栏　　　　 aside
侧栏子容器 aside-in
盒容器　　 wrap/box