Css选择器命名规则

标签: CSS | 发表时间:2011-10-04 23:30 | 作者:Sky_志刚 ninickck
出处:http://www.qianduan.net

操作系统版本:Windows 7

浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev

受影响的浏览器:所有浏览器.

经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式..

一、关于选择器的命名

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

由于设计到的字符很多,本文只针对字符[a-zA-Z0-9],再加连字号(-)和下划线(_)进行讨论。 关于CSS中允许使用的字符和大小写信息,请参考W3C CSS2.1的4.1.3节

二、差异及可能产生的问题

在W3C CSS2.1说明文档中,只提到选择器标识符不能以数字,或一个连字号后跟数字为开头。除 此之外,没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢?

请观察如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
div{width:160px;height:20px;font-size:12px;line-height:20px;background- color:yellow;}
 
.f-1_f_{background-color:#d4d4d4;}
 
.1{background-color:#A8A8A8;}
 
.123456{background-color:#d4d4d4;}
 
.2demo{background-color:#A8A8A8;}
 
.2-demo {background-color:#d4d4d4;}
 
.2_demo {background-color:#A8A8A8;}
 
.-demo{background-color:#d4d4d4;}
 
.-2demo {background-color:#A8A8A8;}
 
._demo {background-color:#d4d4d4;}
 
._2demo {background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---{background-color:#A8A8A8;}
 
._{background-color:#d4d4d4;}
 
.——{background-color:#A8A8A8;}
 
._-{background-color:#d4d4d4;}
 
.-_{background-color:#A8A8A8;}
 
.-{background-color:#d4d4d4;}
 
.---_{background-color:#A8A8A8;}
 
.---123{background-color:#d4d4d4;}
 
.__123{background-color:#A8A8A8;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="f-1_f_">字母开头</div>
<div class="1">单个数字</div>
<div class="123456">多个数字</div>
<div class="2demo">数字开头 + [a-z][A-Z]</div>
<div class="2-demo">数字 + "-" 开头</div>
<div class="2_demo">数字 + "_" 开头</div>
<div class="-demo">连字符(-)开头 + [a-z][A-Z]</div>
<div class="-2demo">连字符(-) + 数字 开头</div>
<div class="_demo">下划线(_)开头 + [a-z][A-Z]</div>
<div class="_2demo">下划线(_) + 数字 开头</div>
<div class="-">单个连字符(-)</div>
<div class="---">多个连字符(-)</div>
<div class="_">单个下划线(_)</div>
<div class=" 	">多个下划线(_)</div>
<div class="_-">下划线(_) + 连字符(-)</div>
<div class="-_">连字符(-) + 下划线(_)</div>
<div class=" 	-">多个下划线(_) + 连字符(-)</div>
<div class="---_">多个连字符(-) + 下划线(_)</div>
<div class="---123">多个连字符(-) + 数字</div>
<div class=" 	123">多个下划线(_) + 数字</div>

看看各浏览器下面的结果

 

 

 

 

 

 

 

 

观察上表,分析各浏览器下的表现,总结如下

 

 

 

 

从上面看到,我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。因此,如果选择器的命名不规范,将影响各浏览器下,样式渲染不一致。比如如下代码:

1
2
div{font-size:12px;background-color:yellow;width:150px;height:30px;line- height:30px;}
.20fontsize{font-size:18px;background-color:#d4d4d4;}
1
<div class="20fontsize">以数字开头的类名</div>

以数字开始的类名仅在IE6(Q)/IE7(Q)/IE8(Q)下被识别,而其它浏览器下则不识别(忽略该规则)

三、如何避免受此问题影响

坚持以字母开头命名选择器,这样可保证在所有浏览器下都能兼容。

四、关于团队合作的css命名规范

常用的css命名规则

头: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

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

注册:regsiter

状态:status

投票:vote

合作伙伴:partner

(二)注释的写法:

/* Footer */

内容区

/* End Footer */

(三)id的命名:

(1)页面结构

容器: container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的: current

小技巧:tips

图标: icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如

.barnews { }

.barproduct { }

注意事项::

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写,除非一看就明白的单词.

主要的 master.css

模块 module.css

基本共用 base.css

布局,版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

相关 [css 选择 命名] 推荐:

Css选择器命名规则

- ninickck - 前端观察
操作系统版本:Windows 7. 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev. 受影响的浏览器:所有浏览器.. 经常讲到css选择器命名规则,其实不只是在团队合作基础上来讲这个,每个浏览器,IE产品,火狐,苹果,谷歌,都会因为命名不规范会产生不同样式...

CSS命名规范

- - BlogJava-首页技术区
网上整理的比较好的css命名规则,为css代码的规范化做参考,增加代码的可读性. 容器: container 页头:header 内容:content/container. 页面主体:main 页尾:footer 导航:nav . 侧栏:sidebar 栏目:column 左右中:leftright center .

CSS,样式选择器

- - 博客园_首页
CSS(层叠样式表)使用来美化页面用的,CSS主要有元素内连,页面嵌入和外部引用三种使用方式;. 1.元素内联,直接将样式写入元素的style属性中,适用于样式没有可复用性的场合. 2.页面嵌入,在head头部进行嵌入. 结果:表示页面中所有的input都采用指定的样式. 适用于样式复用,减小页面的面积.

[译]XPath和CSS选择器

- - 博客园_首页
原文: http://ejohn.org/blog/xpath-css-selectors. 我认为将这两种选择器的写法做一个比较是很有价值的.. 所有P元素的第一个子元素. 从语法上看,我非常惊讶这两种选择器在某些情况下的相似性,尤其是'>'和'/'两者之间.虽然他们并不总是有着相同的功能(XPath中要取决于正在使用的轴),但通常情况下他们指的都是某个父元素的子元素.还有,空白符' '和'//'都意味着当前元素的所有后代元素.最后是星号'*',类似于通配符,表示所有元素,而不管是哪种标签名..

编写高效的 CSS 选择器

- - 博客 - 伯乐在线
伯乐在线注:我们昨日在 @程 序员的那些事 微博上推荐了英文原文,感谢 @freestyle21 和 @沈涛-WEB工程师 的热情参与. 高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能.

网站CSS选择器性能讨论

- - 阿里巴巴(中国站)用户体验设计部博客
    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素. 作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面的渲染速度,缩短页面呈现时间. 我们先来看一下safari和webkit的架构师David Hyatt的两段话:.

推荐三十款CSS样式选择器代码

- 小伟 - UED TEAM,用户体验设计,web前端开发
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

30个最常用css选择器解析

- We_Get - 博客园-首页原创精华区
你也许已经掌握了id、class、后台选择器这些基本的css选择器. 下面向大家系统的解析css中30个最常用的选择器,包括我们最头痛的浏览器兼容性问题. 掌握了它们,才能真正领略css的巨大灵活性. 星状选择符会在页面上的每一个元素上起作用. web设计者经常用它将页面中所有元素的margin和padding设置为0.

小tip: CSS后代选择器可能的错误认识

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2286. 一、关于类选择器的一个问题. 假设有下面一个面试题,CSS代码如下:. 问:第一行和第二行文字颜色分别是. 这个例子很简单,我估计基本上都能回答正确:DOM越深的类名权重越高,因此,第一行文字红色,第二行文字绿色第一行文字绿色,第二行文字红色.

10个你必须要知道的CSS选择器

- - Jackchen Design 1984
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的. 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”. “选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素.