Css选择器命名规则-阿里云开发者社区

开发者社区> 测试5555> 正文

Css选择器命名规则

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

操作系统版本: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规则由两部分组成:选择器和声明块,声明由一个或多个声明组成,每个声明是一个属性-值对. 1.元素选择器 元素是最基本的选择器, h1,p,a都可以直接做为选择器,甚至是html本身.
396 0
css知多少(3)——样式来源与层叠规则
原文:css知多少(3)——样式来源与层叠规则   上一节《css知多少(2)——学习css的思路》有几个人留言表示思路很好、继续期待,而且收到了9个赞,我还是比较欣慰的。没看过的朋友建议先去看看上一节。
832 0
一个健壮且可扩展的 CSS 架构所需的8个简单规则
本文讲的是一个健壮且可扩展的 CSS 架构所需的8个简单规则,这是一份清单,里面列出了在我多年的专业 Web 开发期间,在复杂的大型 Web 项目中学习到的有关管理 CSS 的事项。我多次被人问起这些东西,所以写一份文档记录下来听起来是个不错的主意。
930 0
你真的精通 CSS 了?来挑战一下 CSS 选择器测验吧
  CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能。作为前端开发人员必须要掌握的一部分,可能基本的大家都知道。但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道。 您可能感兴趣的相关文章 OverAPI.
589 0
CSS选择器的权重与优先规则
权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”。   原文:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。
595 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4407 0
memcache 键名的命名规则以及和memcached的区别
2014年3月27日 07:47:46 Keys----Data stored by memcached is identified with the help of a key. A keyis a text string which should uniquely identify the d...
576 0
+关注
测试5555
前端相关技术专家
511
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载