CSS Formatter & Minifier

Ctrl+Enter Run · Ctrl+Shift+C Copy · Esc Clear

Understand CSS Formatter & Minifier

这个格式化工具按花括号深度重新缩进样式表，也能把它压成仍可解析的最小文本。

它扫描承载 CSS 结构的三个字符—— { } 和 ; ——每遇到一个左花括号就缩进一层，并把每条声明放到单独一行。压缩会移除注释和所有可省略的空格：花括号、冒号、分号和逗号周围的空格，以及右花括号前的最后一个分号，因为花括号本身已经结束了该声明。工具不会重排任何顺序，也不会改写任何值。

两种模式都会删除注释，包括某个依赖的许可证要求你保留的 /*! ... */ 声明块。
值内部的分号会让美化功能出错。url(data:image/svg+xml;base64,...) 里就含有一个，因此内联的 data URI 中间会被插入换行，该规则随之失效。压缩模式能处理这种情况，美化模式不能。
这里的压缩只移除空白。真正的压缩器还会合并重复规则并缩短取值（把 #ffffff 写成 #fff），因此你在这里测到的体积，并不是你的构建工具最终产出的体积。
预处理器源码仅按花括号缩进。SCSS 的嵌套看起来会是对的，但 @mixin、& 和变量都只是原样通过，不会被检视。

Not the right tool for: 生产环境的压缩。cssnano 或 Lightning CSS 会解析样式表，做出本工具无法安全做出的各种转换。

压缩 CSS 能减少多少体积？

通过去掉空白、注释和多余的分号，压缩通常能减少 10–30% 的 CSS 体积。再配合服务器上的 gzip 压缩，相较未压缩、未精简的 CSS，实际传输体积可减少 60–80%。

它支持 CSS 自定义属性（变量）吗？

支持——CSS 变量（--color-primary: #5C5BFE）会被保留并正常格式化。格式化工具不会求值或内联变量的值；它把它们当作不透明的字符串值。

开发时应该压缩 CSS 吗？

不应该——只在生产构建时压缩。压缩后的 CSS 不可读，会让调试变得非常困难。请用构建工具（Vite、webpack、esbuild）在生产环境自动压缩，并在版本控制中保留格式化后的源码。