CSS 格式化完全指南：美化、压缩与厂商前缀

1. 美化、压缩、校验分别解决什么

前端日常说的「整理 CSS」常混在一起：

WebUtils 本页聚焦 美化 + 压缩：工具栏可选 2 空格 / 4 空格 / Tab 缩进，左侧输入、右侧输出，显示字符数，支持复制结果。压缩路径会 **删除 / ... / 注释** 并收紧符号旁空白。

它与完整 PostCSS / cssnano / Lightning CSS 流水线不同：页面实现是 面向常见手写 CSS 的轻量规则，对极端嵌套、复杂 @ 规则、字符串里的特殊字符要人工复查。把「在线快速整理」和「构建管线权威压缩」分开，能避免错误预期。

一分钟前后对照

压缩或单行样式：

.btn{display:inline-flex;align-items:center;padding:10px 20px;background:#10b981;color:#000;border-radius:10px}
.btn:hover{background:#059669}

美化（4 空格示意）后：

.btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    background: #10b981;
    color: #000;
    border-radius: 10px
}
.btn:hover {
    background: #059669
}

人眼可以立刻扫到伪类与声明块边界。注意：部分简易美化对最后一项分号、@media 内部缩进层级的处理较朴素，回写仓库前应用 diff 看一眼。

2. 写 CSS 时和格式化强相关的规则

声明块与选择器

• 每个规则集以选择器开头，{ 开启声明块，} 结束。
• 声明为 属性: 值;，分号在压缩前后都应保持可解析；美化时通常每条声明一行。
• 多个选择器可用逗号分行，利于 review「到底匹配谁」。

注释

• 标准注释只有 / ... /，没有 //（除非预处理器）。
• 压缩器删除注释后，依赖注释的「许可证头」或临时 / stylelint-disable / 会消失——生产包若需要许可证，应在构建配置里 preserve 或单独注入。
• 本页压缩：去注释。不要用本页压缩「仅想去空白但保留许可证」的场景。

厂商前缀与顺序

历史属性常带 -webkit-、-moz-、-ms- 等前缀。格式化 不应排序错到改变层叠意图 到难以阅读，但你手写时建议：

1. 标准属性与前缀写在同一逻辑组，避免中间插入无关声明。
2. 若用 Autoprefixer，源码写标准属性，前缀交给构建，而不是在线工具「智能补前缀」（本页 不补前缀）。
3. 压缩后前缀应仍在；若发现前缀丢失，说明输入在字符串/注释切割上触碰了简易正则边界，应换构建链或分段处理。

/* 手写兼容示例：格式化后仍应保留各行 */
.box {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}

预处理器与现代语法

结论：预处理器源文件请用对应生态的 Prettier/Stylelint；本工具适合「已经是 CSS 的文本」快速整理。

颜色与格式化

美化/压缩通常不改 #10b981 与 rgb() 的等价选择。若要在 HEX/RGB/HSL 之间换写法，用 颜色转换器，不要指望格式化工具「顺便换色法」。

3. 用 WebUtils 美化与压缩：逐步操作

工具页：CSS 格式化。

1. 打开工具。 进入 /tools/dev/css-formatter，确认工具栏有缩进下拉框与「美化代码」「压缩代码」。
2. 粘贴 CSS。 放到「输入 CSS 代码」；下方或旁侧会更新「N 字符」统计。
3. 选缩进。 需要与仓库一致时选 2 / 4 / Tab；团队若禁止 Tab，不要选 Tab 后把结果提交进 Git。
4. 美化。 点击「美化代码」。右侧出现换行与缩进后的文本；toast 提示「代码已美化」。
5. 检查关键与 @ 规则。 滚动输出，确认 -webkit- 等仍在，@media 的大括号成对。
6. 压缩。 需要部署体积时点「压缩代码」。注释会被去掉；对比输入/输出字符数估收益。
7. 复制。 「复制结果」写入剪贴板；空输出不会复制。
8. 清空。 处理完敏感或不需要的草稿时点「清空」。

能力边界

• 做： 快速美化常见 CSS、去注释压缩、本地字符统计、主题切换。
• 不做： 自动 Autoprefixer、消除死代码、合并相同选择器、SCSS 编译、保证与 cssnano 字节级一致。
• 隐私： 浏览器本地处理；仍避免把未开源的整站 CSS 贴到不可信共享会话。

若你只需要极致压缩、且工作流固定为「输入 → 最小体积」，也可使用独立的 CSS 压缩 书签；本页适合美化/压缩来回对比同一份输入。

4. 常见问题与处理办法

5. 真实工作场景

场景 A：从线上 View-Source 抠样式做还原

把单行 CSS 贴入 → 4 空格美化 → 按选择器搜索与设计稿对比。不要直接在压缩串上改。还原完成后，源码库仍以组件化 CSS/CSS-in-JS 为准，线上抠码仅作对照。

场景 B：上线前再压一刀第三方片段

某统计或聊天插件提供了未压缩 CSS。先美化阅读是否含可疑 * 选择器或巨大字体包引用，再压缩内联或落盘。字符统计可作「是否值得内联」的粗指标。

场景 C：Code Review 风格争议

双方各美化到同一缩进，再看真正的属性差异。把「空格」从 review 噪声里拿掉。若项目有 Prettier，以 Prettier 为准，在线工具只处理「对方发来的临时片段」。

场景 D：邮件 HTML 里的 CSS

邮件客户端对 CSS 支持破碎。先美化看用了哪些属性，再决定内联。格式化不保证邮件客户端兼容；它只帮你读。

场景 E：怀疑厂商前缀被构建剥掉

拿构建产物 CSS 美化，搜索 transform 与 -webkit-transform。若目标浏览器仍需前缀而产物没有，修的是 Autoprefixer browserslist，不是再手写一遍前缀到业务源码。

场景 F：与 HTML 一起排查「样式不生效」

先用 HTML 格式化理清 class 嵌套，再在 CSS 里美化后搜索该 class。类名拼写错误比「需要压缩」常见十倍。

6. 性能与工程习惯

• 传输： 压缩 + Gzip/Brotli 才是完整故事；只去空格仍要开启 HTTP 压缩。
• 缓存： 文件内容哈希的文件名；改一行 CSS 应换 URL。
• 关键路径： 关键 CSS 阻塞渲染；关键关键路径、其余打包。
• 不要 在生产用「美化后的」大文件；美化留给开发与排错副本。
• Source Map： 正式压缩交给带 map 的构建，线上报错才能映射回源。
• 重复声明： 格式化不会合并 .a{color:red} 与 .a{color:red}；重复是设计/生成问题。

7. 相关工具怎么选

选型口诀：又看又压用格式化页；只压可用 minifier；DOM 问题先 HTML；色值问题用颜色工具。

常见问题

继续浏览

用一段含 @media 与前缀的真实片段走通「美化 → 目视 → 压缩 → 看字符数」。再视需求打开 CSS 压缩或 HTML 格式化。