CSS 格式化与美化：把压缩样式表读回人能看的样子

我接手过一份别人留下的主题文件，单行，18KB，全是分号。想找一句按钮背景色，对着屏幕眯了快一分钟。后来才意识到，这种时候不需要起项目、不需要装依赖，把它丢进一个 CSS 美化工具，几秒钟就还原成有缩进、有换行的样子。这篇就把 CSS 格式化里那些容易被忽略的细节讲清楚：缩进怎么选，属性该不该排序，压缩怎么反向展开，以及它和 Prettier 到底是什么关系。

CSS 美化到底在做什么

很多人以为格式化就是「加几个换行」，其实它要同时处理三件事：缩进、换行、和大括号配对。

缩进决定可读性。常见三档是 2 空格、4 空格、Tab。团队项目里一般跟着既有约定走，临时读一段陌生代码时 2 空格最省屏幕高度。换行决定结构，每条声明独占一行、每个选择器块之间留空，眼睛才能按规则块来扫。

最关键的是大括号配对。一个靠谱的格式化器用的是 tokenizer 而不是正则。区别在哪？字符串字面量里可能藏着大括号，比如 content: "}"，注释里也可能有 /* { */。正则很容易在这里断错位，把后面整段都解析歪。基于大括号配对的解析会把字符串和注释当作整体跳过，嵌套的 @media、@keyframes、@supports 也能正确跟踪层级。

一段真实的压缩 CSS 展开例子

下面这段是常见的压缩输出，全挤在一行：

.btn{padding:8px 16px;background:#2563eb;color:#fff;border-radius:6px}.btn:hover{background:#1d4ed8}@media(max-width:640px){.btn{width:100%}}

选 2 空格缩进点一下格式化，得到：

.btn {
  padding: 8px 16px;
  background: #2563eb;
  color: #fff;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

@media (max-width: 640px) {
  .btn {
    width: 100%;
  }
}

注意 @media 块的内层规则多缩进了一级，这就是大括号配对在起作用。现在再问「按钮是什么蓝」，一眼就看到 #2563eb，不用数分号了。

属性排序：什么时候开，什么时候别碰

属性排序是把单条规则内部的声明按字典序排（color, font, margin, z-index……）。它最大的价值是让 diff 干净。两个人改同一份 60 条规则的样式表，如果缩进和属性顺序各漂各的，PR diff 会有四十行装饰性改动盖住真正改的那三行。两边都排一遍序，diff 立刻收敛。

但有一类写法千万别排：声明顺序有意义的时候。比如先写 border 再写 border-color，是想用后者覆盖前者的颜色，字典序会把它们调换，覆盖关系就反了。简写加覆盖（shorthand 后接单项）这种模式，保持排序关闭。

还要记住一条边界：排序只动单条规则里的声明，选择器之间的顺序永远不动。因为选择器顺序直接影响 cascade，乱排会改变页面外观。这是格式化器和 optimizer 的分水岭。

压缩是反向操作，但它不优化值

格式化和压缩是同一个工具的两个方向。压缩去掉所有空白和注释，把上面那段展开的 CSS 收回单行，适合内联进 <head> 做关键 CSS，或者直接交付生产。一段 1.2KB 的首屏样式压完大约剩 780 字节，塞进 HTML 不拖慢首屏。

这里有个关键认知：格式化器不是 optimizer。#ffffff 保留为 #ffffff 不会缩成 #fff，0px 保留为 0px 不会变 0，0.5rem 不会变 .5rem，浏览器前缀按原文保留。好处是值保持字节一致，你可以放心地「格式化完做 diff」确认改动，也能保证压缩后的渲染结果和测过的完全一样。想要 #fff、0 这种值级别优化，请在构建里跑 cssnano 或 csso，那是另一类工具的活。如果你只是想快速把体积压下来，可以直接用 /zh/t/css-minifier/ 这个专门的压缩工具。

和 Prettier 是什么关系

经常有人问，既然有 Prettier 为什么还要在线工具。答案是它们解决不同场景。Prettier 和 stylelint 装在 devDependencies 里，commit 时跑，按团队配置生效，是工程内的事。在线格式化器对应的是另一种时刻：别人在群里甩了一段压缩 CSS，你想读，但不想专门起一个沙箱。打开页面、粘贴、点一下，没有安装、没有配置文件、没有项目。

好的在线工具会把输出风格做得接近 Prettier 默认值，这样格式化完的结果丢回 Prettier 项目里不会因为风格差异再次重排。所以两者不是替代，是互补：日常工程交给 Prettier，临时一次性的阅读和清理交给在线工具。

本地处理为什么重要

最后说一点容易被忽略的：隐私。设计 token、内部主题文件、还没发布的第三方设计系统，这些东西本来就不该上传到陌生服务器。一个 100% 浏览器本地运行的格式化器，粘贴的 CSS 不发往服务器、不进日志、也不进 URL。想验证很简单，点 Format 或 Minify 时打开 DevTools 的网络面板，确认零请求。NDA 范围内的样式表也能安心处理。

工具本体在这里：/zh/t/css-formatter/，缩进三档、属性排序、压缩反向都在一个页面里。如果你处理的是别的格式，/zh/t/json-formatter/ 和 /zh/t/sql-formatter/ 是同一套思路的姊妹工具，可以一起收藏。

Made by Toolora · Updated 2026-06-13