site topic网站专题
首页
>
网站专题
>
专题详情
分享新闻到:

CSS精简压缩:技巧与工具

互诺科技:2010-09-18 00:50     阅读数:       标签:

学习编写简练、优化的CSS需要大量的实践和一种不自觉的强迫性清洁的渴望。然而让你的CSS保持整洁并不仅仅是你对清洁的疯狂的心理需求,尤其对于大型网站来说,这会使页面加载更快。更快的加载时间就等同于提高可用性和较高的用户满意度。

很多人都有代码洁癖。这不是件坏事。

本文将整理集中你可以用来优化你的CSS的技术,以及一些可以自动压缩你的代码的在线和桌面压缩工具。

压缩还是不压缩

在我们讨论如何压缩CSS之前,需要注意一下在压缩和代码的易读性上常常要有个平衡。很多编码者以其CSS组织清晰为傲,而且并不希望自己的代码被通过压缩器去掉注释和断行。作为一个设计师,你应该分析你所编写的代码的目标。如果你要创建一个小的只需要几行CSS的网站,可能就没有必要做额外的压缩。同样,如果你在编写需要和一个开放团队分享的代码,插入额外的注释和断行可以节省你的同事的大量时间并获得他们真心的感谢。然而,如果你在设计一个需要大量CSS的大型网站,你肯定要注意你的文件大小并进你所能保持其最小。

可能在寻找压缩和可能性之间的完美结合上面需要花一些时间,但是它们都值得挖掘而且实现它们的平衡可以让你的工作变得容易很多。同时,很明显并不是说压缩一定会导致可读性的降低。很多可用于压缩代码的技术都能生成更好更有组织的代码。

考虑到这一点儿,让我们开始了解一些技术已保持CSS文件最小化吧。

空白样式定义

让我们从明显的开始。如果你有一个空白样式,丢掉它。不要借口稍后或许会用到,你也知道它们是杂乱的。除非你有一个合理的理由,否则不要添加它们。

缩写

CSS缩写是一种将多行CSS合并到单行的方法。 养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。这里是个例子:

长写版本:

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

缩写版本:

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

了解更多CSS缩写技巧,可以访问下面的文章:

screenshot