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
• 指南：guide
• 服务：service
• 注册：regsiter
• 状态：status
• 投票：vote
• 合作伙伴：partner

4、连接符“-”和下划线“_”的讨论

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

连接符“-”的优势

1. 按键简单
2. 有利于SEO

下划线“_”的优势

1. 表现出层级来，用到下划线来区分功能和部分会比较好?
2. 某书推荐：单词之间分割使用驼峰命名, 表从属关系用下划线命名。

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

*************************************************************

CSS 选择器命名规范化
关于CSS命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。
规范的命名也是Web标准中的重要一项，标准的命名可以更好的看懂代码，我想大家应该都有这种经历，某日翻出自己过去写的代码居然看不懂了，呵呵，为了避免这种情况我们就要规范化命名，再说了，现在一个项目不是一个人就可以完成的，是需要大家互相合作的，如果没有规范化命名，别人就无法看懂你的代码，大大降低了工作效率，所以必须规范化命名，这样还显着咱专业！
好了不多说了，关于CSS命名法，和其他的程序命名差不多，也是有三种：骆驼命名法，帕斯卡命名法，匈牙利命名法。
【骆驼命名法】
说到骆驼大家肯定会想到它那明显的特征，背部的隆起，一高一低的，我们的命名也要这样一高一低，怎么才能这样，就用大小写字母呗~，大写的英文就相当于骆驼背部的凸起，小写的就是凹下去的地方了，但是这个也是有规则的，就是第一个字母要小写，后面的词的第一个字母就要用大写，如下： 
1.#headerBlock
2..navMenuRedButton 
【帕斯卡命名法】
这种命名法同样也是大小写字母混编而成，和骆驼命名法很像，只有一点区别，就是首字母要大写，如下 
1.#HeaderBlock
2..NavMenuRedButton 
【匈牙利命名法】
匈牙利命名法，是需要在名称前面加上一个或多个小写字母作为前缀，来让名称更加好认，更容易理解，比如： 
1.#head_navigation
2..red_navMenuButton 
以上三种，前两种（骆驼命名法、帕斯卡命名法）在命名CSS选择器的时候比较常用，当然这三种命名法可以混合使用，只需要遵守有一个原则就可以，就是“容易理解，容易认，方便协同工作”就OK了，没有必要强调是那种命名法。
以下为于页面模块的常用命名
头：header 
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content 到这节课，都是CSS非常基础的知识，是为了照顾没有一点基础的同学，从下节课开始，将介绍CSS布局页面中的很重要的两个概念，也是必须要掌握的概念，如果不能很好理解的话后面再布局页面的时候就会出现很多问题。
1）盒子模型
2）内链元素VS块状元素