CSS压缩大法：技巧与工具

要了解更多关于CSS Sprites，请查看Chris Coyier在CSS-Tricks上的教程:

当然，前端观察也有一些很有价值的关于CSS Sprites的文章和技巧。

减少注释

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

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

当文件大小成为一个大问题的时候，不要将替代字体包进你的font-famly中。去掉所有不必要的累赘，并将你的额外选项减少到一到两个。

之前:

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

之后:

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

关于字体，强烈推荐阅读一下玉伯写的《三谈 Web 默认字体》，文中提到的几篇文章也都值得我们去阅读和思考。

使用16进制色彩

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

之前:

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

之后:

#container{color:#8364DB;}

去掉断行

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

之前:

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

之前:

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

10个在线CSS压缩工具

CSS压缩工具可以自动完成清理你的代码的大部分工作。它们中的很多会告诉你你的文件被压缩的百分比，所以请多尝试几个以了解哪个是最好的。

CSS Drive

可选项:

• 压缩模式: 低、普通、高度压缩
• 注释压缩:不压缩、全部、或者长于某个特定值的。

CSS Compressor

可选项 (每个均可选Yes 或No ):

• 重排属性
• 压缩色彩
• 压缩font-weight
• 小写化选择器
• 去除不必要的空间
• 去除不必要的分号

Arantius

可选项 (每个均可选Yes 或No ):

• 去除注释
• 去除至少x字节长度的注释
• 每行一个规则

CSS Optimizer

可选项:

• 不删除断行(Yes 或 No)
• 可以处理URL、文件或粘贴的文本等方式的CSS

Lottery Post

可选项:无

Clean CSS

可选项(每个均可选Yes 或No ):

• 重排选择器
• 重排属性
• 优化选择器及其属性(0, 1 or 2)
• 合并简写属性
• 只有安全优化
• 压缩色彩
• 压缩Font-weig

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!