CSS压缩工具

使用方法

1. 页面打开时输入框里已经放好一段 54 行的示例样式，原始体积 968 字节；结果区给出的就是它压缩后的样子，641 字节，省掉 327 字节、压缩率 33.8%。先看一眼这段，就知道输出长什么样。
2. 换成自己的 CSS 时直接整段粘贴覆盖，不需要先手工格式化。这个 CSS压缩工具是逐字符扫描的，缩进乱七八糟、注释夹在中间、一行写十条声明都不影响结果。
3. 点「压缩 CSS」即出结果；如果你更习惯键盘，在输入框里按 Ctrl + Enter（macOS 用 Cmd + Enter）同样触发——这里 Enter 必须留给换行，所以没有做成单键触发。
4. 「复制结果」把压缩后的整段 CSS 放进剪贴板，「下载 .css」存成 style.min.css，可以直接替换线上的样式文件。
5. 下面的「规则明细」表列出这次压缩命中了哪些规则、各命中多少次。想核对「哪一处空白被删了、哪一处是我故意留下的」，看这张表比肉眼比对代码快得多。

这个 CSS压缩工具能解决什么问题

一是上线前的最后一道手工。样式表在开发阶段总带着注释、缩进和分组空行，压缩后同一段示例从 968 字节变成 641 字节，而且这还只是起点：压缩后的文本再走 gzip，从 656 字节变成 457 字节，两条路叠加的收益比任何单一手段都大。

二是内联样式和关键 CSS的场景。把首屏样式塞进 HTML 的 <style> 标签里时，每一行缩进都在拖长首字节时间；工具把注释和缩进一次性剥干净，示例里内联块能小掉三分之一左右，正好用来换取更少的阻塞字节。

三是交接代码时先清一遍。别人发来的样式里常混着 /* stylelint-disable */、/* TODO */ 这类临时标记和整段被注释掉的旧规则，压缩一次就像做了一次「只删注释、不改语义」的清理，剩下的才是真正生效的代码。

四是把「哪里的空白不能删」这件事实验清楚。同一份输入可以反复改一处、再压缩一次，立刻看出这处的空白被保留还是被删掉，比翻规范快。规则明细表会把每次的命中次数列出来，做对照实验很直观。

本页不做这些事：不做值级优化（不把 0px 改写成 0、不把 #ffffff 缩成 #fff）、不合并重复选择器、不加浏览器前缀、不做语法校验、不生成 sourcemap。要先把样式排整齐再动手改，请用页面底部的「CSS格式化美化」；要检查括号有没有配对，请用「CSS校验」。

压缩原理：一个逐字符状态机与 17 条规则

这个 CSS压缩工具的核心不是一串正则替换，而是一次从左到右的单遍扫描，扫描过程中只有四个互斥状态：普通代码、字符串（单引号或双引号）、注释、url() 括号内部。每读到一个字符就按当前状态决定它的去向。之所以不用「先把字符串抠出来占位、再用正则删空白」这种常见做法，是因为正则无法区分「注释里的引号」和「字符串里的注释符号」——content: "/* 不是注释 */" 会被正则链清得面目全非，而 url(http://a/*b.png) 里的 /* 同样不是注释。

注释按「一个空白」处理，而不是直接删掉。这是最容易踩的一处：a/*x*/b 在 CSS 里是两个记号，直接把注释删成空串会得到 ab，从一个选择器列表变成了一个不存在的标签名。工具的做法是遇到注释就记下「此处有一个待定空格」，等读到下一个有效字符时再决定这个空格要不要落进结果——如果下一个字符是 {、}、; 这类会自己清空空白的标点，空格就丢掉。示例里的 3 段注释一共 150 字节，删完之后一个都不剩。

空白分两类：可以删的和不能删的。可以删的是标点直连处的空白——{ 与 } 两侧、; 两侧、, 两侧，以及括号外的 >、+、~ 两侧。不能删的是冒号前面的空白：.card :focus-visible 里的空格代表「后代元素」，删掉就变成同一个元素上的伪类 .card:focus-visible，两者匹配的节点完全不同。工具因此只删冒号之后的空白（color: #fff → color:#fff），冒号之前原样保留，代价是每处多留 1 个字节，换来的是不会改坏选择器。

括号里藏着一个必须保护的区域。扫描时工具维护一个括号深度计数器，只在深度为 0（也就是不在任何 () 里）时才动 >、+、~ 的空白。原因是 CSS Values and Units Level 3 明确规定 calc() 里的 + 和 - 必须前后都有空白：calc(100% - 8px) 合法，写成 calc(100%-8px) 整条声明直接失效。示例里的 calc(100% - 8px) 就是这样被完整保留的。

末尾分号能省，但有一个例外。块内最后一条声明后面紧跟 } 时，那个分号是纯冗余，工具会删掉；不过删之前会看一眼输出里分号前面那个字符是不是冒号——如果是，说明这是一条自定义属性的空值（--x: ;），分号必须留着，否则 --x: 会连声明都不成立。示例里 9 处末尾分号被删，而 --x: ; 这种写法被原样保住。

词法规则依据的是 W3C 的 CSS Syntax Module Level 3 里对 comment、string-token、url-token 的定义：注释以 */ 结束，字符串里的反斜杠可以转义下一个字符，url( 之后的内容在遇到右括号前整体当作一个记号。工具只处理「已经写好」的 CSS，不做语法解析，所以它不需要构造抽象语法树，单遍扫描的复杂度是 O(n)，20 万字符的输入也能在一次点击内跑完。

完整示例（数值仅作演示）

示例条件与页面打开时的默认值完全一致：输入框里那段 54 行、968 字节的示例样式，其中包含 3 段注释、1 处 url()、1 处 calc()、若干带空白的字符串，以及一批多行缩进。压缩结果的实测数字是：

• 压缩后 641 字节（625 个字符），一共省下 327 字节，压缩率 33.8%；
• 其中注释贡献 3 处 / 150 字节，其余 177 字节来自空白、换行与可省的末尾分号；
• 这段文本再走 gzip：原始 656 字节 → 压缩后 457 字节，也就是先压缩再 gzip，比只 gzip 又少了 199 字节；
• 块内末尾分号删掉 9 处，冒号后的空白删掉 24 处，> + ~ 两侧空白删掉 8 处；
• 反过来，保留的东西同样具体：字符串里 6 个空白字符、url() 里 2 个空白字符、calc() 运算符两侧 2 处空白，以及散布在值列表与后代选择器里的 15 个单空格，一个都没动。

几个最容易看错的位置单独拎出来对照，左边是输入里的写法，右边是压缩后的结果，最后一列是规则依据：

对照输入与输出的第一行，还能看到一个细节：输入开头那段注释被删掉后，输出的第 1 个字符就是 .，前面不留空行、不留空格——工具在扫描结束后会把结果首尾残余的空白也一并裁掉，否则每次压缩都会莫名其妙多出 1 个字节。

输入范围与对照表

输入上限是 20 万字符（按输入框的 maxlength 计），够容纳一份中等项目的整包样式。下面这张表列出各类片段在压缩时的具体去向，遇到「为什么这处没被压掉」的疑问，先在这里对一眼：

另外三条与输入有关的具体限制：输入框里既没有 { 也没有 : 时，工具会判定「看起来不是 CSS」并报错，而不是返回一段被压得面目全非的文本；输入只有注释时压缩结果是空串，此时会提示你去补一条真实声明；输入超过 20 万字符会被拒绝，因为单次渲染这么大的结果会让输入框很难操作，拆成几段分别压缩更稳妥。

结果边界与字节口径

• 字符数不等于字节数。压缩率按 UTF-8 字节算，不是按 length 算。示例里那 3 段注释共 150 字节，而它们只有 62 个字符——中文注释每个字 3 字节，所以「删注释省了多少」在带中文注释的样式表里比纯英文样式表更明显。
• 本页没有任何浮点运算，所以不存在舍入。唯一的「精度」问题是口径：同一段 CSS 按字符数是 625，按字节数是 641，两个数都对，看你拿它对比编辑器里的字符计数还是磁盘上的文件体积。
• 未闭合的注释与引号会被兜底处理。读到 /* 却没找到配对的 */ 时，工具按「一直到文末都是注释」处理，并在提示区说明；字符串同理，会把文末当作字符串结束。这样你不会拿到半截被压坏的样式，但这类输入的结果只能当参考，正式文件请先修好语法。
• 压缩结果为 0 字节是一种有意义的报错。输入只有注释、或只有空白时，去注释去空白后什么都不剩，此时工具会明确报错，而不是静静给你一个空文件。
• 压缩会丢掉全部行号与列号。线上报错定位到 style.min.css:1:1842 时基本没法反查，所以本页不生成 sourcemap——需要映射关系请保留一份未压缩的源文件，压缩产物只用于部署。
• gzip 之后再压缩，收益会收窄。示例数据是：只 gzip 得 656 字节，先压缩再 gzip 得 457 字节，等于又省 30.3%；但空白和缩进本身就是 gzip 最擅长压的内容，所以「压缩率 33.8%」与「gzip 后省 30.3%」这两件事有重叠，不能相乘当成省了 64%。
• 不做值级优化的原因很实在。0px 缩成 0 在大多数属性里没问题，但 flex-basis: 0% 与 flex-basis: 0 的弹性分配行为并不一致；#ffffff 缩成 #fff 又要额外判断简写是否恰好等值。这些都属于「先解析、再回写」的改造，判断错就是线上样式错乱，因此本工具只做词法层面的安全动作。
• 老旧滤镜写法请绕开。形如 filter: progid:DXImageTransform... 的历史遗留写法里带着冒号与括号，工具对冒号之后的空白一律删除，这类写法在语法上仍能解析，但如果你还在维护需要它的老项目，建议先用「CSS校验」把这类声明挑出来单独处理。

常见问题

相关工具

• CSS格式化美化：反方向的操作，把一行压缩代码还原成带缩进与换行的可读版本，改完再压回去。
• HTML压缩：把内联样式所在的 HTML 也一起瘦身，通常和这个 CSS压缩工具配套使用。
• JavaScript压缩：同一套「上线前瘦身」思路用在脚本上，注意脚本的注释与空白规则和 CSS 不同。
• JSON压缩工具：接口配置、翻译词条这类 JSON 压成单行，同样属于去掉格式层的空白。
• CSS校验：压缩前先检查花括号是否配对、声明是否缺分号，避免把带语法错误的样式直接压缩上线。
• CSS单位速查表：核对 calc() 里能混用的单位与换算关系，改样式时比翻文档快。
• 开发者工具：查看全部开发者工具。