css压缩方法及工具

本文属于高性能web前端优化系列

css压缩,这里不是指把他用winrar之类的工具给制成压缩包——那样他就没用了。这里的压缩可以理解为:减小体积

有的人喜欢保持良好的编码习惯并为之自豪,我也是。css的良好编码习惯,其中有一条就是,每个属性就写一行,这样写下来,一个普通的网站,css代码能写上几千行。

虽然良好的编码习惯,如良好注释,保持缩进,能让代码更容易阅读,更容易维护。但在网站发布时,尽量减小CSS的体积才是王道,毕竟网站的访客只对你网页内容感兴趣,对你源码感兴趣的不到1/1000。

在网站发布前,我们可以做一些力所能及的事情来精简一下CSS:

  1. 去除所有注释
  2. css支持简略写法,尽量使用,如把margin-left,margin-right等全部集合到一个margin里面。
  3. 在保持语义的前提下,缩短css里的id,classname的长度——这很难,因为css里面缩短了,html中相应的地方也要改才行
  4. 去掉空行
  5. 难点:css说难不难,但他有很多写作技巧,同样的效果,有的人就是能用更短的CSS代码写出来。这是非常重要的,但本文不提供相关技巧的讲解,这些技巧只能靠日积月累的学习

这些操作,只是初步的减小了CSS的体积,但已经适合大部分网站了,因为css文件的体积并不能称之为大,一般不用担心他因为体积的原因加载失败。

但对于大型网站来说,比如日访客几百万的网站,如果css文件能小1KB,那么他一天就能为服务器省下几百万KB的流量,一个月——就更不用说了,所以,这些情况下我们应该尽力的缩小css文件的体积。

以下是一些自虐型或强迫症患者适用的减小css体积的办法,进行之前请备份你的原css

  1. 在写css的时候,就计划着缩小体积的事儿,选择器都是怎么短怎么来,完全没必要管语义,自己能搞清楚就行
  2. 去掉所有空格,换行符,把所有css合并成1行
  3. 甚至,去掉}前面最后一个css属性末尾的分号

当然这种自虐型的精简办法,我们在不是很闲的情况下都不想手动来做,但不要担心,网上有一大把的工具帮我们做这些繁琐的工作。

以下是我google搜索css compress找到的一些工具

http://www.csscompressor.com/

这个工具使用非常简单,但貌似不会把所有CSS合并到一行

http://refresh-sf.com/yui/

这是大名鼎鼎的YUI(雅虎出品)发布的css压缩工具,极端暴力,把上面说的自虐型办法全部实现了。

任选一个使用,都可满足你邪恶的欲望。或者你也可以自行搜索

再强大的工具,也不能指出你CSS的错误,不会告诉你哪里可能出现兼容问题,不会告诉你怎么写CSS更能更灵活,这些,都要孜孜不倦的学习才能懂得。

发表评论

电子邮件地址不会被公开。