CSS 压缩与格式化工具

工具介绍

CSS 压缩会在不改变渲染效果的前提下把样式表改写得尽可能小：去掉注释和空白、在安全的情况下缩短颜色值和零单位、合并重复规则、删除多余的分号。

本工具基于 clean-css——一个真正把样式表解析成语法树而不是用正则处理的 CSS 优化器，因此能安全处理容易让简陋压缩工具出错的边界情况：CSS 自定义属性（--main-color: ...）、字符串内的内容，以及复杂的选择器和媒体查询都能正确保留。

为什么使用它？

• 基于语法树（AST）的压缩引擎 clean-css，而非正则表达式——自定义属性、字符串和嵌套媒体查询都能安全处理。
• 内置二级优化，合并和简化规则，节省的不只是空白。
• 直接显示节省的字节数和百分比。
• 格式化模式能把压缩后的样式表还原成缩进统一、便于阅读的 CSS。
• 全程本地处理——未发布或私有的样式不会离开浏览器。

使用方法

1. 把 CSS 粘贴到输入框，或点击「加载示例」体验一段带自定义属性和媒体查询的示例。
2. 点击「压缩」进行压缩，或点击「格式化」以 2 空格缩进美化代码。
3. 查看输入框下方的提示：压缩模式会显示体积缩减比例；如果 CSS 无效会直接显示明确的错误，而不是悄悄生成损坏的结果。
4. 点击「复制」获取结果。

示例

输入

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

输出

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

自定义属性、媒体查询和层叠顺序都被完整保留，只去掉了空白、注释和多余字符。

实用建议

• 在构建/部署阶段压缩，而不是手动改源码——保留可读的源文件，让这个工具（或你的构建流程）生成上线版本。
• 如果要排查为什么线上页面和预期不一样，先把压缩后的 CSS 格式化，再和源码做对比会清晰很多。
• 自定义属性在压缩后依然完好，所以基于设计变量（如 --spacing、--color-* 等）的样式表可以放心通过本工具处理。
• 如果项目在发布前把各类文件分开管理，可以配合下方的 HTML、JS 压缩工具一起使用。

在实际工作流中的位置

CSS 是收益比较高的压缩对象之一，因为样式表默认会阻塞渲染——每减少一个字节都可能让首次绘制稍微提前一点，在网速较慢的环境下更明显。虽然收益不如图片优化那么大，但只要接入构建流程，这部分几乎是零成本的。

格式化方向则常用于相反的场景：查看竞品或某个老项目线上发布的压缩样式表，先格式化还原再阅读，能更快理解其结构，方便写覆盖样式或做改版。

→ HTML 压缩工具 · JS 压缩工具

常见使用场景

• 部署静态网站或落地页前压缩样式表。
• 还原从线上网站拿到的压缩 CSS 文件，研究其结构。
• 清理设计工具导出的、往往带有大量注释和空白的 CSS。
• 快速检查手写 CSS 片段是否能正确解析，格式错误会直接显示明确的提示。

常见问题