CSS压缩大法文档格式.docx
《CSS压缩大法文档格式.docx》由会员分享，可在线阅读，更多相关《CSS压缩大法文档格式.docx（14页珍藏版）》请在冰点文库上搜索。
同时，很明显并不是说压缩一定会导致可读性的降低。
很多可用于压缩代码的技术都能生成更好更有组织的代码。
考虑到这一点儿，让我们开始了解一些技术已保持CSS文件最小化吧。
空白样式定义
让我们从明显的开始。
如果你有一个空白样式，丢掉它。
不要借口稍后或许会用到，你也知道它们是杂乱的。
除非你有一个合理的理由，否则不要添加它们。
缩写
CSS缩写是一种将多行CSS合并到单行的方法。
养成使用你知道的所有缩写技巧的习惯可以明显的减少你最终写出的代码的行数。
这里是个例子：
长写版本:
#container{
padding-top:
5px
padding-right:
10px
padding-bottom:
30px
padding-left:
18px
}
缩写版本:
padding:
18px;
了解更多CSS缩写技巧，可以访问下面的文章：
推荐阅读阿捷的文章：
《常用CSS缩写语法总结》
CSSSprites
CSSsprites背后的最初想法是减少HTTP请求的数量以加快页面的加载时间。
Sprite实现这个目标的途径就是拼合多张图片到一个单独的图片文件中，通常是一个网格格式的图片。
每个单独的图片通过切换大的sprite图片的background-position来显示。
对于CSS代码来说，使用sprite技术可以大大的提高代码的重用度和可维护性，这会明显的减少CSS的代码量。
要了解更多关于CSSSprites，请查看ChrisCoyier在CSS-Tricks上的教程:
当然，前端观察也有一些很有价值的关于CSSSprites的文章和技巧。
减少注释
我喜欢在代码里面使用注释。
我添加的注释越多，我就能在视觉上更快的定位到代码中的不同的部分。
然而，如果你需要使用少的资源来高度优化的CSS，过度的注释就会吃掉宝贵的字节。
所以，试着去掉所有不必要的注释并重新格式化那些你必须要保留的注释到尽可能少的字节。
合理的字体类型（font-Family）
当文件大小成为一个大问题的时候，不要将替代字体包进你的font-famly中。
去掉所有不必要的累赘，并将你的额外选项减少到一到两个。
之前:
#container{font-family:
Palatino,Georgia,Times,serif;
之后:
Palatino,serif;
关于字体，强烈推荐阅读一下玉伯写的《三谈Web默认字体》，文中提到的几篇文章也都值得我们去阅读和思考。
使用16进制色彩
为了减少字节数，将所有RGB色值转换成他们对应的16进制值。
这开起来可能没有太大的意义，但是任何字节都是值得的！
#container{color:
rgb（131,
100,
219）;
#8364DB;
去掉断行
查看每一个样式属性，并将不需要的硬返回去掉。
你也可以去掉最后一个分号。
margin:
5px;
#container{margin:
18px}
10个在线CSS压缩工具
CSS压缩工具可以自动完成清理你的代码的大部分工作。
它们中的很多会告诉你你的文件被压缩的百分比，所以请多尝试几个以了解哪个是最好的。
CSSDrive
可选项:
∙压缩模式:
低、普通、高度压缩
∙注释压缩:
不压缩、全部、或者长于某个特定值的。
CSSCompressor
可选项（每个均可选Yes或No）:
∙重排属性
∙压缩色彩
∙压缩font-weight
∙小写化选择器
∙去除不必要的空间
∙去除不必要的分号
Arantius
∙去除注释
∙去除至少x字节长度的注释
∙每行一个规则
CSSOptimizer
∙不删除断行（Yes或No）
∙可以处理URL、文件或粘贴的文本等方式的CSS
LotteryPost
无
CleanCSS
可选项（每个均可选Yes或No）:
∙重排选择器
∙优化选择器及其属性（0,1or2）
∙合并简写属性
∙只有安全优化
∙压缩Font-weight
∙属性字体（小写或大写）
∙去除不必要的反斜杠
∙转换!
importanthack
∙移除最后一个分号”;
”
∙节省注释
∙剔除无效属性（CSS2.1,CSS2.0或CSS1.0）
∙输入为文件
事实上，这就是开源项目csstidy的演示网站。
CSStidy中文版：
Pingates
∙转换长色彩名为16进制
∙转换长16进制代码为短16进制代码
∙转换长16进制代码为色彩名字
∙转换RGB为16进制
∙去除0度量
∙合并同一个规则
∙合并同一个选择器
∙合并属性
∙去除重复的属性
∙从margin和padding中去除无用的值
∙显示统计
∙以彩色格式输出
∙使用最小尺寸输出
PHPInsider
SevenForty
∙截断选项:
500,1000,1500or2000
该工具基于YUI压缩器，但是会自动将IE的hacks删除，开发者给出的解释是，IEhacks应该以单个文件出现，而不是杂糅在主CSS文件中，这样会变得难于维护。
PageColumn
None
桌面版CSS压缩工具推荐
YUICompressor与TBCompressor
YUICompressor是yahoo前端团队开发的一个前端代码压缩工具，功能很强大。
需要Java运行环境，可以用java命令手动压缩CSS和JS文件，也可以用ant在编译的时候批量压缩。
淘宝前端团队的玉伯根据YUIcompressor封装的Windows平台压缩工具，安装卸载都很简单。
正如功能强大的YUICompressor，TBCompressor不仅可以压缩CSS，也可以压缩JS。
在这里下载。
了解更多关于TBCompressor–JS和CSS压缩工具
另外，推荐阅读屈超同学的《完善TBCompressor对CSS文件的压缩过程》。
web2.0资源优化工具
国人用delphi7开发的一款桌面工具，也是可以压缩CSS和JS。
推荐一下。
另外值得一提的是，作者放出了该项目的源代码。
查看官方介绍及下载。
另外，貌似该工具的CSS压缩部分基于CSSTidy。
mergeCSS
CSS森林站长鬼哥出品的一个基于AIR的工具，有很多很有用的功能，比如多文件合并、合并@import导入文件等。
查看详细介绍。
需要注意的是，该工具对缩写和属性合并的支持并不太好，如果能够增加这些支持，可能会更好吧。
另外一个非常重要的事情是，到目前为止，鬼哥尚未放出该工具，如果你想尝试一下，可以联系他。
pagespeed
pagespeed其实是Google开发的一个基于Firebug的firefox插件，主要是用来分析网站前端性能的。
但是在pagespeed的分析结果列表中MinifyCSS选项，点开即可看到你的CSS可以压缩的比例，以及后面提供一个压缩过的版本，点击即可查看。
唯一不足的就是不能自定义压缩。
GZIP
无论多么丑陋的网站，GZIP都是一个对压缩很多类型的代码都的确很有用的工具。
它或许并不是最简单的压缩方法，而且对初学者可能还会有些迷惑。
查看这个教程以获取更多关于使用GZIP压缩你的样式的信息。
总结
正如我前面说的，这些方法中的一些可能看起来有些过度或毫无意义。
关键是看大局。
虽然这些技巧中的任何一个可能的只有几乎是微不足道的影响，结合这些技术中的几个或全部就可以对你的CSS文件的大小形成巨大的影响。
另外，如果你了解到有其它的好用的压缩工具，欢迎与我们分享哦～～
转帖自：
升级会员 