7.所有声明语句都应该以分号结尾,最后一条声明语句后面的分号是可选的,但是如果省略这个分号,代码可能更容易出;
8.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格;
9.对于属性值或颜色参数,省略小于1的小数前面的0(例如 .5代替0.5);
10.十六进制值应该全部小写,例如:#fff,尽量使用简写形式的十六进制值,例如用#fff代替#ffffff;
11.为选择其中的属性添加双引号,例如 input[type="text"];
12.避免为 0 值指定单位,例如用margin:0 代替margin:0px.
十一、声明顺序:
相关的属性声明应该归为一组,并且按照下面的顺序排列:
1.positioning(position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100;);
2.box model(display: block; float: left; width: 100px; height: 100px;);
3.typographic(font: normal 13px "Microsoft YaHei"; line-height: 1.5em; color: #333; text-align:center;);
4.visual(background: yellow; border: 1px solid #c00; border-radius: 3px; opacity: 1; );
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位.盒模型排在第二位,因为他决定了组建的尺寸和位置.其他属性知识影响组建的内部(inside)或者是不影响前两组属性,因此排在后面.
十二、不要使用@import
与标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题.替代办法有一下几种:
1.使用多个元素;
2.通过sass或less类似的css预处理器将多个css文件便以为一个文件;
3.通过rails、jekyll或者其他系统中提供过css文件合并功能.
十三、媒体查询(media query)的位置
将媒体查询尽可能放在相关规则的附近.不要将他们打包放在一个单一样式文件中或者放在文档底部.
十四、带前缀的属性:
当使用特定厂商的带前缀的属性时,通过锁紧的方式,让每个属性的值在垂直方向对齐,这样方便多行编辑.例如:
CSS Code复制内容到剪贴板
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
十五、单行规则声明:
对于值包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行.对于带有多条声明的样式,还是应当将声明分为多行.这样做的关键因素是为了错误检测.例如css校验器之处在180行有语法错误,如果是单行单条声明,你就不会忽略这个错误,如果是单行多条声明的话,你就要仔细分析避免漏掉错误了.
