CSS选择器命名规则

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

一. 选择器命名规则

1.1 字符采用

实际项目中，建议只采用字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）。避免使用中文。

1.2 慎用数字

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

1.3 区分ID和class

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

1.4 语义化标签

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

1.5 区分大小写

当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。

二. 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

三. 连接符“-”和下划线“_”的讨论

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

连接符“-”的优势

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

下划线“_”的优势

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

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

最后

以上就是内向大树为你收集整理的CSS选择器命名规则的全部内容，希望文章能够帮你解决CSS选择器命名规则所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。