CSS 格式化/压缩

CSS 格式化器做两件相反的事：把拥挤的单行样式表美化成一目了然的缩进规则，以及把冗长的 CSS 压缩成生产环境下最小的有效形式。粘贴一份样式表，选择方向，两种输出的结果都随时可以复制。前端开发者用它来解读需要覆盖的压缩第三方 CSS、统一团队格式，以及在部署前给样式表再省下几个字节。

使用方法

1. 把 CSS 粘贴到输入区。写得整齐的文件和压缩成一团的内容都可以——工具两者都能读。
2. 选择格式化或压缩。 格式化会添加换行和缩进；压缩会移除所有可选的空白和注释。
3. 检查输出。 格式化结果把每条声明放在单独一行，能立刻看出一处缺失的分号或一个未闭合的大括号。
4. 复制结果到你的编辑器、构建流水线或 bug 报告里。

压缩实际上移除了什么

压缩比人们想象的要克制得多。它只移除浏览器不需要的字符：

• 词法单元之间的空白，以及纯粹用于排版布局的换行。
• 注释，例如 /* ... */。
• 声明块里的最后一个分号，以及数值中可省略的零。
• 值为零时可省略的单位，例如 0px 变成 0。

它不会改变选择器、属性名、属性值或层叠关系。color: #ff0000 和 color: red 行为相同，但压缩器不会把其中一个转成另一个，因为那会以你并未要求的方式改动源码。经验法则：压缩改变的是表示形式，绝不是含义。

实操示例

下面是某份基础样式表的一段：

/* Primary button */
.btn {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #111827;
}

.btn:hover {
  background: #f3f4f6;
}

上面这段本来就是可读的；跑一遍压缩后，它会变成去掉注释的单行，字节数大约是原来的三分之一。要看一个真实的例子，可以把某个压缩过的第三方样式表粘贴进来，点「格式化」：每条规则展开到各自的行上，而你想覆盖的那个属性——某个优先级、某个 z-index、某个硬编码的颜色——几秒内就能找到，而不必在文字墙里滚动查找。

值得保留的格式化约定

• 每个选择器一行，每条声明一行。 这种格式能让版本控制里的差异有意义：一个改动的值只影响一行，而不是整条规则。
• 一致的缩进。 两个空格是常见默认；两个或四个都行，只要整个项目统一。
• 属性顺序。 有些团队按字母排序，有些按相关性分组（定位、盒模型、字体排印、颜色）。字母顺序更容易自动强制，也让规则更易浏览，因为你总能预知 margin 会出现在哪里。
• 谨慎使用简写。 margin: 0 10px 很紧凑，但隐藏了设置了哪几条边。当意图重要时，优先使用明确的长写法，并跑一遍格式化器来保持一致。
• 把结构与主题分开。 把布局规则和颜色／字体变量放进不同文件，这样格式化时永远不会让两者纠缠在一起。

常见错误

• 编辑压缩后的文件。 包含成千上万条规则的一行无法维护；请始终编辑源文件并重新压缩。
• 忘记注释会消失。 你用来做分节导航的备注在压缩版里会不见。请保留一份源文件副本。
• 破坏 calc() 的空格。 + 和 − 运算符两侧需要空格；一个把 calc() 内所有空白都剥掉的步骤会产生无效 CSS。
• 反复压缩一个已经压缩过的文件。 每一遍对正确性都无害，只是浪费时间，而中间任何一次误手改动都很容易丢失。
• 以为体积数字能简单相加。 前后对比数字衡量的是原始字节；gzip 或 Brotli 再压缩后的传输体积在两种情况下都会更小。

最后说说格式化在什么时候值得做。对于你自己拥有的样式表，在项目开始时格式化一次，然后让构建步骤在输出时压缩它——这样仓库里保留可读副本，浏览器里是压缩副本。格式化的价值与其说体现在日常流程中，不如说体现在「空白就是障碍」的那些时刻：阅读一个引入的库、审阅别人压缩过的输出，或者在一个作为单行长文件收到的文件里追查某条坏掉的声明。

功能

• 美化 CSS：一致的缩进，每条声明一行
• 压缩成最小的有效表示，去掉注释和可选空白
• 处理媒体查询、嵌套的 at-rule 和现代 CSS 语法
• 显示压缩前后体积，让你看到效果
• 可离线使用，绝不上传你的样式表
• 即时的客户端处理——无需注册

使用场景

• 解读第三方 CSS： 格式化一个压缩过的库文件，找出你需要覆盖的规则。
• 生产构建： 部署前压缩样式表，缩减传输体积。
• 代码审阅： 统一格式，让差异体现意图而不是空白。
• 排查 bug： 展开一条压缩规则，找出拼写错误或缺失的分号。
• 团队一致： 约定一种格式，并在整个项目中应用。

相关工具

• CSS 渐变生成器
• CSS 阴影生成器
• HTML 编码器
• JSON 格式化器