CSS森林

对于流量的节省，我们都知道可以通过压缩的方式，如去掉代码中的注释、多余的空格和换行等等。对于样式，也有很多的压缩工具¹可以选择，只是是否足够方便使用？在《 [原]我的样式写法总结 》中提到一点：

有些留白并不是必须，像属性前面的空白、分号后的空白等等，如“ width : 100px; ”，一个定义多了4～5个字节，最主要的是很多时候我们并不一定会使用压缩工具。

并不是我们不知道要压缩代码，往往是因为工具的使用过于复杂，或没有所要的功能造成的。当然“懒”也是很重要的因素。

在项目中，很多时候我们使用了“@import”的方式在样式文件中引入另一个样式文件，在发布的时候，可能会有几种类型的需求：

• 将引入的样式合并到一起，生成一个新文件（减少链接数）
• 只压缩当前的文件，不处理引入的样式（保持公共文件的独立维护）

目前大部分工具都只能处理单个文件的压缩，将多个文件合并的功能还没有（除了 PJ 几年前针对上面第一种需求为项目写的一个工具，适合用于批处理）。对于一些文件较小、较分散的文件，使用PJ的工具复杂度比较大，因此这部分文件就因为“种种原因”而没有被压缩了。

自己尝试写了个样式文件合并工具，界面如下。希望能同时满足上面两个需求，由于是用于解决实际项目的问题，因此有些功能做了舍弃，如压缩方面只是做了最简单的处理，没有做格式的检查（兼容css hack）;没有对复合属性进行合并处理（有些时候是必须分开写的）;没有缩写颜色值（大部分颜色定义都是使用了继承，而且也较少使用到刚好可以缩写的值，决定省下这部分资源）。

简单介绍下功能：跟 bg2css 一样，使用AIR制作，兼容多系统平台。提供了三种处理方式，“单文件”、“单文件快速保存”、“多文件”，分别的功能如下：

• “单文件”模式：支持单个文件处理，包括可选择是否保留“@import”内链的样式文件导入;是否将相对路径转换为绝对路径;是否压缩为一行;是否输出文件完整性验证标记²。
• “单文件快速保存”模式：与“单文件”模式功能相同，支持同一设置快速保存。
• “多文件”模式：支持将多个文件合并;可选其中某些文件不合并;不支持保留”@import“内链，所有文件都会被并入到新文件;是否压缩为一行;是否输出文件完整性验证标记。

另外“单文件”和“多文件“两个模式可选三个保存的方式：“桌面”、“文件目录”和“自定义位置”。

程序名称：CSS 样式合并工具(mergeCSS)
主要作用：合并、压缩样式文件

版本信息：
mergeCSS v1.5.1 2009-10-25
(fix)文件名预览显示不同步
+界面调整

mergeCSS v1.5 2009-10-24
(fix)多文件模式下内链两层时的排序错误
(fix)不同平台间的路径兼容问题
+文件名预览
+在线更新

mergeCSS v1.4 2009-9-29
(fix)多文件选择取消合并时文件不对
+多文件模式下禁用“保留内链文件”功能
+读取网络上的文件
+文件内链路径替换

mergeCSS v1.3 2009-9-27
+单文件与多文件处理开关

mergeCSS v1.2 2009-9-24
+压缩成一行的选项
+增加“单文件、多文件、单文件快速保存”三种处理模式

mergeCSS v1.1 2009-9-13
+选择需要合并的文件
+选择是否保留import文件
+选择是否转换import路径
+保存到桌面、文件目录或自选目录

mergeCSS v1.0 2009-8-25
+拖动添加文件
+文件类型检查
+合并样式文件(无外链)
+压缩样式文件
+保存结果文件

¹ 样式压缩工具

• TBCompressor 2.4.2
• csscompressor
• CSStidy

² 用于前端脚本决断样式文件加载是否完成。