
代码格式发布时间:2014-08-19 | 分类:CSS规范 |
在xhtml标准中规定了所有标签、属性和值都小写,CSS也是如此。
便于选择器的寻找和阅读,也便于插入新选择器和编辑,便于模块等的识别。去除多余空格,使代码紧凑减少换行。
如果有嵌套定义,可以采取内部单行的形式。
1
2
3
4
5
6
7
8
9
10
11
|
/* 单行定义一个选择器 */ .m-list li,.m-list h3{ width : 100px ; padding : 10px ; border : 1px solid #ddd ;} /* 这是一个有嵌套定义的选择器 */ @media all and ( max-width : 600px ){ .m-class1 .itm{ height : 17px ; line-height : 17px ; font-size : 12px ;} .m-class2 .itm{ width : 100px ; overflow : hidden ;} } @-webkit-keyframes showitm{ 0% { height : 0; opacity : 0; } 100% { height : 100px ; opacity : 1; } } |
通常在大括号结束前的值可以省略分号,但是这样做会对修改、添加和维护工作带来不必要的失误和麻烦。
为节省不必要的字节同时也使阅读方便,我们将0px、0em、0%等值缩写为0。
1
|
.m-box{ margin :0 10px ; background-position : 50% 0; } |
省略url引用中的引号,其他需要引号的地方使用单引号。
1
2
|
.m-box{ background : url (bg.png);} .m-box:after{ content : '.' ;} |
除非你需要透明度而使用rgba,否则都使用#f0f0f0这样的表示方法,并尽量缩写。
1
|
.m-box{ color : #f00 ; background :rgba(0,0,0,0.5);} |
只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。
→ | 显示属性 | 自身属性 | 文本属性和其他修饰 |
---|---|---|---|
display | width | font | |
visibility | height | text-align | |
position | margin | text-decoration | |
float | padding | vertical-align | |
clear | border | white-space | |
list-style | overflow | color | |
top | min-width | background |
1
|
.m-box{ position : relative ; width : 600px ; margin :0 auto 10px ; text-align : center ; color : #000 ;} |
如果属性间存在关联性,则不要隔开写。
1
2
|
/* 这里的height和line-height有关联性 */ .m-box{ position : relative ; height : 20px ; line-height : 20px ; padding : 5px ; color : #000 ;} |
先写带有浏览器私有标志的,后写W3C标准的。
1
|
.m-box{-webkit- box-shadow :0 0 0 #000 ;-moz- box-shadow :0 0 0 #000 ; box-shadow :0 0 0 #000 ;} |
对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。
注释内容两端需空格,已确保即使在编码错误的情况下也可以正确解析样式。
在必要的情况下,可以使用块状注释,块状注释保持统一的缩进对齐。
原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。
1
2
3
4
5
6
7
8
9
|
/* 块状注释文字 * 块状注释文字 * 块状注释文字 */ .m-list{ width : 500px ;} .m-list li{ height : 20px ; line-height : 20px ; /* 这里是对line-height的一个注释 */ overflow : hidden ;} .m-list li a{ color : #333 ;} /* 单行注释文字 */ .m-list li em{ color : #666 ;} |
很多不兼容问题可以通过改变方法和思路来解决,并非一定需要Hack,根据经验你完全可以绕过某些兼容问题。
一种合理的结构和合理的样式,是极少会碰到兼容问题的。
由于浏览器自身缺陷,我们无法避开的时候,可以允许使用适当的Hack。
统一使用“*”和“_”分别对IE7和6进行Hack。如下代码所示:
1
2
|
/* IE7会显示灰色#888,IE6会显示白色#fff,其他浏览器显示黑色#000 */ .m-list{ color : #000 ;* color : #888 ; _color : #fff ;} |
“建议并适当”是因为缩写总是会包含一系列的值,而有时候我们并不希望设置某一值,反而造成了麻烦,那么这时候你可以不缩写,而是分开写。
当然,在一切可以缩写的情况下,请务必缩写,它最大的好处就是节省了字节,便于维护,并使阅读更加一目了然。
缩写方法请查阅css手册。
请综合考虑以下顺序依据:
以下仅为简单示范:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* 从大到小 */ .m-list p{ margin : 0; padding : 0; } .m-list p.part{ margin : 1px ; padding : 1px ;} /* 从低到高 */ .m-logo a{ color : #f00 ;} .m-logo a:hover{ color : #fff ;} /* 从先到后 */ .g-hd{ height : 60px ;} .g-bd{ height : 60px ;} .g-ft{ height : 60px ;} /* 从父到子 */ .m-list{ width : 300px ;} .m-list .itm{ float : left ;} |
a = 行内样式style。
b = ID选择器的数量。
c = 类、伪类和属性选择器的数量。
d = 类型选择器和伪元素选择器的数量。
选择器 | 等级(a,b,c,d) |
---|---|
style=”” | 1,0,0,0 |
#wrapper #content {} | 0,2,0,0 |
#content .dateposted {} | 0,1,1,0 |
div#content {} | 0,1,0,1 |
#content p {} | 0,1,0,1 |
#content {} | 0,1,0,0 |
p.comment .dateposted {} | 0,0,2,1 |
div.comment p {} | 0,0,1,2 |
.comment p {} | 0,0,1,1 |
p.comment {} | 0,0,1,1 |
.comment {} | 0,0,1,0 |
div p {} | 0,0,0,2 |
p {} | 0,0,0,1 |
扫描二维码分享到微信