CSS压缩与格式化

工具说明

写样式时为了可读性会有大量缩进与注释，上线前这些字符占的体积需要压掉。压缩只做「删除」——删注释、折叠空白、去掉可省的分号，不碰任何选择器与属性值，所以行为完全一致；格式化则相反，按层级把代码摊开，方便接手别人的压缩代码。

压缩时哪些空白不能删

• 字符串里的内容：单引号与双引号包裹的部分整段保留，包括里面的空格与分号。
• url() 里的路径：带空格的路径是合法的，不能折叠成单个空格以外的形式。
• 选择器组合符两侧：大于号、加号、波浪号两侧的空白可以安全删除，这是压缩的主要收益之一。
• 冒号前的空白：不能无条件删除。因为在选择器里冒号前有空格表示后代关系，删掉会改变语义，所以本工具保守地保留属性声明中冒号前的空白。

压缩能省多少

常规手写样式表去掉注释与缩进后通常能省 30% 到 50%；如果服务器开了 gzip 或 br 压缩，实际传输体积的差别会小很多——重复的空白本来压缩率就极高。所以压缩的主要价值在于减少解析负担与统一代码风格，不要把它当作唯一的性能手段。

格式化有什么用

接手别人的压缩代码、排查线上样式、做代码评审时，先格式化再读能省很多时间。本工具按大括号层级缩进，@media 等嵌套块会多缩进一级，读起来与源码结构一致。

你可能还想问

压缩后样式会变吗？

不会。本工具只做两类操作：删除注释、把连续空白折叠成一个或去掉。选择器、属性名、属性值、字符串内容都不做任何改写，所以渲染结果与压缩前完全一致。唯一需要留意的是用了 !important 的地方，本工具不会改动它。

为什么压缩后体积减少得不多？

如果你的服务器已经开启了 gzip 或 br 压缩，那么空白与缩进本来就被压得很好，再手工压缩的边际收益很小。另外如果样式表里已经没什么注释与缩进，可压的空间自然有限。可以关注本工具给出的原始大小与结果大小对比，若差距很小说明源文件本身已经足够紧凑。

格式化会把单行 CSS 拆得很碎吗？

会按规则断行：每条声明独占一行，大括号独立成行。这是常见且便于阅读的格式。如果你的 CSS 是用单行写法维护的，格式化后再压缩可以还原成紧凑形式，两者配合使用即可。

能处理 SCSS 或 Less 吗？

不能可靠处理。SCSS 与 Less 有变量、嵌套、mixin 等扩展语法，本工具的扫描器只认识标准 CSS 的字符串、注释与大括号，遇到嵌套写法可能无法正确断行。请先用预处理器编译成标准 CSS 再压缩。

相关工具

相关内容