原则：整个项目的命名风格要统一，id说明特殊性，class说明普遍性。

从模块重用和节约文件体积的角度看，建议id类应尽量减少使用。

class类的命名向模块化发展。

命名风格：
常见的命名风格有：1.分隔线 css-style(不推荐)；2.下划线 css_style(次推荐)；3.驼峰式 cssStyle(主推荐)。

没有强制一定用哪种风格，不过同个项目中最好只使用一种风格，除非想表达特殊作用的再用多种风格，但要写好注释说明。

好的命名规范也能体现出语义化。

id 和class：
什么时候用id，什么时候用class没有一个绝对的说法。

这里只是提供一个参考。

对于页面的各个结构外层或者特殊部分（比如页面的布局，各个栏目），用id 来说明这个区域是什么内容。

对于页面中可重用的结构或者一些常用的从属结构（比如栏目中的标题，文章，列表等），用class来说明这个小块是什么，表现怎么样。

约定：搜索search不加bar修饰, 比如左边搜索区域, 命名为: searchL。

以此类推, L(左边), R(右边), T(上方), B(下方)。

不管任何模块, 为避开css 过多的命名名称, 比如选项卡tab的标题区域, 用hd命名, 写法为：" .tab .hd " 所有模块, 全部采用hd和bd模式。

另外, 用"Tb"代表表格的缩写，比如表单表格: formTb。

所有css命名采用Java的命名规范, 既是驼峰式的命名方式, 比如"newsList"。

大量模块使用雅虎的hd和bd命名思想（见‘CSS 书写’ 部分），将内层的css类命名简化，减少起名字的次数。

最好不要用id类定义html的模块外观，id类的唯一性比特殊。

比如在两个div中，用了相同的 id，js拿id 交互便会出现问题。

!
当我们采用下划线 _ 方式命名的时候在Dreamweaver等工具中双击，即可全选命名。

而采用分割线 - 命名时双击选取只能选中分割的一部分。

本文档来自宝来网按照行业从业经验编写，转载请注明：宝来网。