CSS代码精简优化—附在线压缩工具

发表于:2010/07/27, 属于分类: 网站优化, 本文作者: admin

网站优化是一门比较深奥的学问,网站代码优化也尤为重要,如果网站流量一大,一个小小的CSS文件也是会影响网站速度的。学习如何编写优化、简练的CSS是需要大量的实践经验和一种不自觉的强迫性思想。更快的网站加载实践能够提高网站信任度和较高的用户体验。很多编写代码的时候都有洁癖,当然,这从很多角度讲,很重要。

本文介绍部分优化CSS代码的技术,包括一些能够自动压缩CSS代码的在线和本地工具。

删除所有空白样式
首先,你要有一个清晰的理念:如果你有一个空白样式,那么丢弃它。你不能找任何借口说,稍后会用到它,或许你也发现他们是杂乱无章的,除非你有很多合理的理由,请不要添加他们。

简写

CSS缩写是CSS规则中定义过的一种方法,例如把font-family和font-size放入font样式中。请不要小看这几个字符,往往一个大型网站,这小小的改动,能够节省上百GB的流量。以下我再举个例子:

长写版本:

#container{
padding-top:5px
padding-right:10px
padding-bottom:30px
padding-left:18px
}

缩写版本:

#container{
padding:5px 10px 30px 18px;
}

如果你有兴趣,可以参考以下文章:http://www.dustindiaz.com/css-shorthand/

减少注释

我喜欢在代码里面使用注释。我添加的注释越多,我就能在视觉上更快的定位到代码中的不同的部分。然而,如果你需要使用少的资源来高度优化的CSS,过度的注释就会吃掉宝贵的字节。所以,试着去掉所有不必要的注释并重新格式化那些你必须要保留的注释到尽可能少的字节。


设置合理的字体类型(font-Family)

其实这一点很简单,考虑到用户的类型,在中国,宋体永远是主流字体,把font-family的首选项写为:宋体,如果你觉得主流字体已经变成微软雅黑,那么在第二选项写入微软雅黑。其他可以添加一些必要的英文字体就行,

举例说明:之前:

#container{font-family:Palatino,Georgia,Times,serif;}

之后:

#container{font-family:Palatino,serif;}

去掉断行

查看每一个样式属性,并将不需要的硬返回去掉。你也可以去掉最后一个分号。

之前:

#container{
margin:5px;
padding:5px 10px 30px 18px;
}

之后:

#container{margin:5px;padding:5px 10px 30px 18px}

使用16进制色彩

为了减少字节数,将所有RGB色值转换成他们对应的16进制值。这开起来可能没有太大的意义,但是任何字节都是值得的!

之前:

#container{color:rgb(131, 100, 219);}

之后:

#container{color:#8364DB;}

接下来分享几个不错的在线CSS压缩网站:
1.Clean CSS http://www.cleancss.com/
2.Lottery Post http://www.lotterypost.com/css-compress.aspx
3.CSS Optimizer http://www.cssoptimiser.com/
4.Arantius http://tools.arantius.com/css-compressor
5.CSS Compressor http://www.csscompressor.com/

总结

通过以上介绍的部分压缩CSS方法,想必大家都对网站CSS压缩有一个定义,这些方法可能对很多人来说,都是可有可无,但是要处理一个大型网站,这是必须的,需要每个人都能把网站代码写得端正,而不是在真正遇到困难的时候去后悔很多东西没做。

标签: