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