Css选择器命名规则

在实际项目中，因为参与人员个人习惯不一样，导致写出的CSS选择器命名千奇百怪，对项目维护运营、内部技术沟通均产生了不利影响。

在实际项目中，因为参与人员个人习惯不一样，导致写出的CSS选择器命名千奇百怪，对项目维护运营、内部技术沟通均产生了不利影响。因此在项目实施前，网页重构人员有必要统一CSS选择器命名规则，以期将更多精力放在其他工作上。



1、W3C规范
W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以 数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数 字编码。

2、选择器命名规则
2.1字符采用
实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文。

2.2 慎用数字
以字母开头，避免纯数字，避免数字开头，以保证兼容。以数字开始的类名、ID名仅在IE6/IE7/IE8下被识别，而其它浏览器下则不识别（忽略该规则）。

2.3 区分ID和class
一个ID名在文档中只使用一次，class类名可在文档中多次使用。

2.4 语义化标签
语义化标签是个很大的话题，简单点说，语义化标签就是让css选择器的命名能够反映页面结构的功能区块，如内容区域的class类名定义为content，页脚区域的class类名定义为footer。语义化标签的一个好处是让网页结构一目了然，另外一个好处是提高网页对一些特殊浏览设备的友好性。

语义化标签的一个误区是按CSS样式表现的结果命名。

如，某区域字体大小为14px,则该区域的样式名定义为font14px,css样式为.font14px{ font-size:14px;}。如，某区域字体颜色为红色，则样式定义为red,css样式为.red { color: red; }。

这样的好处是实现某种程度的“所见即所得”，即只需要看该结构的样式名，即可知道该样式控制（实现）着怎样的效果。但其弊端同样明显。

可以想象，假设是产品boss突然要将某区域的字体颜色从red改为blue,那你是只更改.red { color: red; }将其改为.red { color: blue; }?还是“勤快”的将html页面所有的red类名更改替换为blue,再添加一个新样式.blue { color: blue; }?

前者意味着“所见非所得”，当看到一个命名为red的样式却表现为blue时，你是否觉得很诡异！？

后者意味着无止境的替换或修改，若是文件较少，还可以接受。但若是有成百上千个页面，你需要将成百上千的文件替换样式名称后再上传，崩溃了，有木有？

所以严重建议不按CSS样式表现的结果命名。

从深层层次分析，CSS的出现是让HTML只专注于结构，实现网页结构和样式的分离，这也是CSS能够代替表格布局而风靡的重要原因。按CSS样式表现结果命名，实际上是让HTML结构和CSS产生强耦合，是违背结构和样式分离的。

2.5 区分大小写
当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。

class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

3、CSS命名规则常用单词
在团队协作中，CSS命名常常用到以下单词。

头：header 内容：content/container 尾：footer

导航：nav 侧栏：sidebar 栏目：column

页面外围控制整体布局宽度：wrapper 页面主体：main

登录条：loginbar 标志：logo 广告：banner

热点：hot 新闻：news 下载：download

子导航：subnav 菜单：menu 子菜单：submenu

搜索：search 友情链接：friendlink 页脚：footer

版权：copyright 滚动：scroll 内容：content

标签页：tab 文章列表：list 提示信息：msg

小技巧：tips 栏目标题：title 加入：joinus

指南：guild 服务：service 注册：regsiter

状态：status 投票：vote 合作伙伴：partner

4、连接符“-”和下划线“_”的讨论
当定义名称都采用小写的时候，也就排除了使用驼峰法命名的选择。对于比较常的CSS命名，连接符“-”和下划线“_”何时使用就成了问题。

连接符“-”的优势

1、按键简单

2、有利于SEO

下划线“_”的优势

1、表现出层级来，用到下划线来区分功能和部分会比较好?

另外，某书推荐：单词之间分割使用驼峰命名, 表从属关系用下划线命名。

总之，如何使用要看项目成员之间的约定及需要，连接符“-”和下划线“_”并无太大区别，选择对团队对项目最有利的是最好的，毕竟规范没有最好的只有最合适的。