缩写值可以减少CSS文件大小,并增加可读性和可维护性。
但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项。
/* 比如我们用下面这个样式来让某个定宽的容器水平居中,我们要的只是left和right,
* 而top和bottom不是这个样式要关心的(如果设置了反倒会影响其他样式在这个容器上的使用),
* 所以这时我们就不需要缩写
*/
.f-mgha{margin-left:auto;margin-right:auto;}
/* 比如下面这个模块的样式设置,我们确实需要设置padding的所有项,于是我们就可以采用缩写 */
.m-link{padding:6px 12px;}
以下所举列的属性可能造成渲染性能问题。不过有时候需求大于一切……
/* expression */
.class{width:expression(this.width>100?'100px':'auto');}
/* filter */
.class{filter:alpha(opacity=50);}
即CSS选择器组合,可以一次定义多个选择器,为你节省很多字节和宝贵时间。
通常我们会将定义相同的或者有大部分属性值相同(确实是因为相关而相同)的一系列选择器组合到一起(采用逗号的方法)来统一定义。
/* 以下对布局类选择器统一做了清除浮动的操作 */
.l-hd:after,.l-bd:after,.l-ft:after{display:block;visibility:hidden;clear:both;height:0;content:".";}
.l-hd,.l-bd,.l-ft{zoom:1;}
/* 通常background总是会占用很多字节,所以一般情况下,我们都会这样统一调用 */
.m-logo,.m-help,.m-list li,.u-tab li,.u-tab li a{background:url(../images/sprite.png) no-repeat 9999px 9999px;}
.m-logo{background-position:0 0;}
/* 以下是某个元件的写法,因为确实很多元素是联动的或相关的,所以采用了组合写法,可以方便理解和修改 */
.c-tab li,.c-tab li a{display:inline;float:left;height:30px;line-height:30px;}
.c-tab li{margin:0 3px;}
.c-tab li a{padding:0 6px;}
图片本身的优化:
多张图片的合并:
分类合并:
并不是把所有的图标都合并在一张图片里就是最好的,除了要控制图片大小之外还要注意以下方法。
让CSS做更多的事,减轻JS开发量。
如果你做到了“CSS规范”的所有要求,自然你也就写出了一个便于阅读和修改的漂亮的CSS。
当然,代码格式和命名规则是相对重要一些的。
如果你做到了命名规则的要求,你的CSS模块也就清晰可见了。
用“注释”来说明每一个模块对于较大的CSS文件来说显得尤为重要。
合理的书写CSS能很大程度上减少文件大小,完成后,在不损坏文件内容的情况下,想尽一切办法压缩你的CSS,你可以借助压缩工具把注释和多余的空格、换行去掉。
压缩工具详见:“HTML/CSS工具”部分。
优化方法请参见代码格式。