CSS选择器命名规则及常用命名

CSS 发布时间:2022/07/13 阅读量:201 来源:优尚设计
在实际项目中,因为参与人员个人习惯不一样,导致写出的CSS选择器命名千奇百怪,对项目维护运营、内部技术沟通均产生了不利影响。因此在项目实施前,网页重构人员有必要统一CSS选择器命名规则,以期将更多精力放在其他工作上。

W3C规范

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

选择器命名规则

字符采用

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

慎用数字

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

区分ID和class

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

语义化标签

语义化标签是个很大的话题,简单点说,语义化标签就是让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产生强耦合,是违背结构和样式分离的。

区分大小写

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

CSS命名规则常用单词

  1. 导航 nav
  2. 头 部 header
  3. 容 器 Container/box
  4. 底 部 footer
  5. 滚动 scroll
  6. 页面主体 main
  7. 主导航 mainnav
  8. 内容 content
  9. 顶导航 topnav
  10. 标签页 tab
  11. 子导航 subnav
  12. 版权 copyright
  13. 菜单 menu
  14. 登录 login
  15. 子菜单 submenu
  16. 列 表 list
  17. 子菜单内容 subMenuContent
  18. 侧 边 栏 sidebar
  19. 标志 logo
  20. 搜索 search
  21. 广告 banner
  22. 图 标 icon/logo
  23. 页面中部 mainbody
  24. 表格 table
  25. 小技巧 tips
  26. 列 定 义 olumn_1of3 (三列中的第一列)
  27. 加入 joinus
  28. 标题 title
  29. 注册 regsiter
  30. 指南 guid
  31. 新闻 news
  32. 下载 download
  33. 上传 update
  34. 按钮 button
  35. 状态 status
  36. 服务 service
  37. 投票 vote
  38. 注释 note
  39. 友情链接 friendlink
  40. 提示信息 msg
文章标签: 命名规则 选择器
微信
网站定制咨询 网站定制咨询