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命名,连接符“-”和下划线“_”何时使用就成了问题。
连接符“-”的优势
- 按键简单
- 有利于SEO
下划线“_”的优势
- 表现出层级来,用到下划线来区分功能和部分会比较好?
- 某书推荐:单词之间分割使用驼峰命名, 表从属关系用下划线命名。
总之,如何使用要看项目成员之间的约定及需要,连接符“-”和下划线“_”并无太大区别,选择对团队对项目最有利的是最好的,毕竟规范没有最好的只有最合适的。
*************************************************************
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块状元素