什么是CSS压缩工具？

CSS Minifier 通过移除空白、注释和冗余语法来压缩您的 CSS 代码。文件更小，下载更快，PageSpeed 评分也更高。

底层用的是 CSSO 算法,不只是删空格。它会合并相邻的同选择器规则,删去多余的简写写法(margin: 10px 10px 10px 10px 简化成 margin: 10px),清掉用不上的厂商前缀,还会把能写成三位的十六进制色值从六位压成三位。

使用方法

1. 将 CSS 代码粘贴到输入区域、上传 .css 文件，或直接按网址加载样式表。
2. 点击压缩按钮——工具将自动移除注释、空白并简化属性值。
3. 复制压缩后的输出或下载为 .css 文件，同时查看显示的压缩比。

何时使用

• 把静态网站的样式表打包上线,而项目又没有构建步骤。
• 比较两个版本的样式表,看手写代码里究竟藏了多少冗余。
• 把关键 CSS 直接内联进 HTML 头部时,挤出最后几字节的体积。

结果

一个 24KB 含注释和格式化的样式表，压缩后仅 16KB——减小 33%，在 3G 网络下可节省约 50ms 加载时间。

常见问题

压缩后的 CSS 在浏览器里渲染效果会不一样吗?

浏览器解析压缩后的 CSS 和格式化的 CSS 完全一样,层叠、优先级、计算值都保持不变。唯一变化是文件在磁盘和网络传输中变小了。

压缩之后还要再 gzip 吗?

要。在压缩基础上再加 gzip,能再减 60-80% 的体积。多数 CDN 会自动开启 gzip。先压缩仍然有用,因为 gzip 擅长压重复模式,而压缩后的 CSS 重复模式更多。

压缩会破坏我的 source map 吗?

本工具不生成 source map,因为它只处理单个 CSS 字符串,而不是整个构建图。如果需要 source map,请用 esbuild 或 Vite 这类构建工具,它们会在产出压缩 CSS 时同时输出 .css.map。

为什么压缩后还残留一些空格?

CSS 在字符串值内、选择器各部分之间(.a .b 和 .a.b 不一样),以及 calc() 表达式内,空格都是有语义的。工具只去掉语义上无必要的空格,其余原样保留。

用了 CSS 变量(自定义属性)的样式表能放心压缩吗?

可以。自定义属性的名字和值原封不动,工具只去掉它们周围的格式。--brand-color 这种变量保留你写的字符,在 var() 调用里继续工作。

相关工具