CSS 格式化与美化工具，免费

CSS 格式化到底在做什么

一个 CSS 格式化器（也叫“美化器”或“pretty-printer”）会接受任何形态的 CSS（压缩过的生产输出、从浏览器审查器中粘出来的单行片段、缩进不一致的手写样式表）并以约定俗成的缩进、换行以及一致的选择器与声明格式重新输出。浏览器的 CSS 解析器在解析时会忽略空白，所以无论源代码怎么排版，渲染出来的页面都长得一样。这件事的意义纯粹是给人看的可读性：缩进出来的层级让 @media 的嵌套清晰可见，一行一个属性让眼睛能快速扫过一条规则的声明，整个代码库一致的格式让 diff 评审更快。四种真实的工作流：(1) 调试从 DevTools 审查器粘进来的压缩生产 CSS，搞清楚某条规则为什么没匹配上；(2) 把从浏览器“Computed”面板提取的 CSS 重新格式化，方便和源对比；(3) 在合并完一个使用不同约定的贡献者的代码后，把团队的格式差异统一回来；(4) 当源代码退化成紧凑的一行一行时，把 CSS 准备好做代码评审。

几款主要的 CSS 格式化器

js-beautify（Einar Lielmanis，2007 年起）是 JavaScript 生态里历史悠久的格式化器，其 CSS 部分正是为 beautifier.io 这个公开门面提供动力，并且历史上支撑过几十个“在线格式化 CSS”的网站。Prettier（James Long，2017 年 1 月；CSS 支持在 2017 年 6 月 3 日的 v1.4 中加入）是一款带强观点的格式化器，最终主导了现代前端生态。Prettier 的设计哲学是“几乎不要配置”，一种缩进风格（默认 2 个空格）、一个行宽目标、可预测的换行。安装了 Prettier 扩展之后，它就是 VS Code 中 CSS 的默认格式化器。Stylelint（David Clark + Maxime Thirouin，2015）更像 lint 工具而不是格式化器，但通过 --fix 选项支持保存即格式化，是在团队中强制 CSS 约定的事实选择，它的 100 多条内置规则覆盖了从“不要重复选择器”到“优先用 hex 而非 rgb()”再到“只用单引号”等等。clean-css（Jakub Pawlowicz，2011）以压缩为主，但有一个“美化”模式，可以反向操作。这四款最终都通过 PostCSS（Andrey Sitnik，2013 年 9 月 7 日开始）来解析 CSS，这是一个通用的 CSS 解析器，驱动着大半个现代 CSS 生态（Autoprefixer、cssnano、Tailwind 的处理流水线）。对 2026 年的现代项目而言，保存时跑 Prettier 是默认；本浏览器内工具是为脱离任何项目上下文的一次性场景准备的。

缩进与选择器的约定

2026 年的 CSS 约定明显倾向于 2 个空格的缩进，这是 Prettier、Tailwind 源码、Bootstrap 的 Code Guide、Google CSS Style Guide 以及大多数发布到 npm 的 CSS 包的默认。更古老的 4 个空格约定还在某些遗留代码库里活着。在 CSS 中，Tab 比较罕见（在 JS/TS 中更常见）。对于选择器：以逗号分隔的选择器列表按惯例每个一行（.btn,<br>.btn-primary,<br>.btn-secondary {），方便在不重排该行的前提下增删某个选择器。组合器（>、+、~）通常每侧带一个空格。伪类链（:hover:focus）保持紧凑。通配选择器（*）和后代组合器（隐含的空格）对格式化器是中性的。

声明的格式化

一行一个声明是现代默认，color: red; 单独一行，padding: 10px; 在下一行。“紧凑”那种替代写法（一行多个声明）在如今的生产 CSS 中很少见；大多数团队为了可读性和干净的 diff 都已经转向了一行一个。冒号后单个空格：写 color: red;，而不是 color:red;。最后一条声明也加分号：CSS 规范上技术上是可选的，但每一款现代格式化器都会加上，目的是对 diff 友好，加一条新属性时不必去改上一行。规则之间空一行：可选，按团队习惯。Prettier 会保留输入中已有的空行，而不是强制某种风格。属性值里的引号：含空格的字体名要加引号（font-family: "Helvetica Neue", sans-serif;）；URL 按惯例也加引号（url("image.png")），但不加引号也合法。值的归一化：关键词转小写（RED → red）、十六进制简写（#FFFFFF → #fff）、零值去单位（0px → 0），这些大多属于压缩器而不是格式化器，但有些格式化器会做那些无损的改动。

CSS 中的特殊情况

@media 查询会把里面的规则多缩进一级，让条件结构在视觉上一目了然。@keyframes 块包含百分比规则（0% { ... }、100% { ... }），按同样的方式缩进。@font-face 声明里有几对 src/format，每对单独一行会更清楚。CSS 自定义属性（--brand-color: #3b82f6;）和别的声明一样格式化，但属性名保留大小写（与标准属性不同，自定义属性名是大小写敏感的）。calc() 表达式要求在运算符两侧加空白，calc(100% - 20px) 是对的，calc(100%-20px) 是非法的 CSS。格式化器会保留 calc() 内必要的空白，同时把外围的上下文规整化。CSS 嵌套（CSS Nesting Module Level 1，2023 年起进入 baseline）（一项相对较新的特性，让嵌套规则相对父规则缩进）已经改变了格式化器处理嵌套语法的方式；现代的 Prettier 和 Stylelint 都理解原生语法。

排序属性，一个出乎意料有争议的约定

有些团队会在每条规则里强制属性顺序。三种约定相互竞争。按字母（本工具的“排序属性”开关）：最简单，机械上容易强制，让“X 是不是已经在这里声明过？”变成一眼就能扫到。Google CSS Style Guide 推荐字母序，对厂商前缀做点让步。按概念（定位 → 盒模型 → 排版 → 视觉 → 动画）：把相关的属性聚在一起。SMACSS 那本架构书让这种做法流行起来。按类型（先 display，再盒模型，再文字，再杂项）：是“按概念”的一种变体，分组更刚性。Stylelint 的 order/properties-order 规则可以通过配置支持其中的任何一种。三者中没有哪一种能让渲染变更好；选择完全取决于在你扫读规则时哪种心智模型对你更轻松。本工具把字母序作为一个 opt-in 的开关；想要其它约定的话，得在真实项目里配 Stylelint。

现代 CSS 的工作流水线

对带构建流水线的项目而言，2026 年的默认是：编辑器里保存时跑 Prettier，每次提交时通过 Husky + lint-staged跑 Stylelint。VS Code 在装上扩展之后，会把 Prettier 作为 CSS、SCSS、LESS 文件的默认格式化器。预提交钩子通过 Husky 在允许提交之前，对暂存的文件运行 Stylelint 与 Prettier。CI 检查在 pull request 上运行 stylelint --check 与 prettier --check。开发期间格式化之后，生产 CSS 会经过 cssnano（基于 PostCSS，是现代的压缩标准），它会把格式化器做的事情全部反过来，为发布生成压缩字节。这一切对从别处粘进来的一次性片段都不重要，这正是本浏览器内工具的用武之地。对长期项目工作而言，请在本地把 Prettier + Stylelint 配好；其它情况下，浏览器内工具是无摩擦的选项。

常见用例

• 代码评审。在和同事分享之前，把压缩或紧凑的 CSS 变得可读。
• 调试。格式良好的 CSS 让你立刻看到哪些选择器在匹配、哪些声明被覆盖了。
• 重构。面对一份不是你写的样式表，格式一致会让理解它的结构容易得多。
• 清理浏览器审查器的输出。DevTools 里的“复制规则”按钮会产出紧凑、难读的 CSS；在把它粘到你的样式表之前先格式化一下。
• 用于生产的压缩。“压缩模式”开关会把格式化反过来，在向生产部署 CSS、每一字节都很重要时很有用。
• 团队标准化。提交 PR 之前，把格式对齐到团队约定。

隐私：为什么“仅在浏览器”在这里很重要

CSS 里很少有显式的机密，但专有样式表会泄露站点内部的类名分类、设计系统的 token、藏在选择器名字里的 A/B 测试假设，以及还没上线的功能。服务器端格式化器会把你的 CSS 上传到第三方服务，让它停留在日志里。本工具完全在你的浏览器中通过 JavaScript 运行，你可以在点击“格式化”时打开开发者工具的网络标签页查看，或者在页面加载完成之后让它离线（飞行模式），格式化器仍然能用。对专有样式表、设计系统的真理之源文件、A/B 测试变体，或任何你不希望被复制到陌生人硬盘上的 CSS 都安全。

常见问题

什么是 CSS 美化？

美化（也叫“格式化”或“pretty-printing”）会把 CSS 源代码重排，使其更易读，加上合适的缩进、规则之间的换行、一行一个属性的声明，以及冒号周围一致的间距。浏览器渲染出的结果是一样的，因为 CSS 解析器在解析时会忽略空白。目标是让代码评审、调试与编辑时的人类可读性更好，并不会改变页面看起来的样子。

我应该什么时候用压缩过的 CSS？

压缩过的 CSS 会去掉所有不必要的空白，是发布到生产的正确选择，它在 CDN 边缘的 Brotli 压缩之前就把文件大小减少了 20–40%，从关键渲染路径上每减少一个字节，对 Core Web Vitals（尤其是 LCP）都很重要。美化过的 CSS 是给开发、代码评审和调试用的。现代的构建流水线（Vite、webpack、Parcel、Astro、Next.js）都会在生产构建时通过 cssnano 或 Lightning CSS 自动压缩，所以做项目时你通常写美化过的 CSS，你的打包器会输出压缩版本。

“按字母排序属性”到底做了什么？

它会把每条规则内的声明按字母顺序排列，border 在 color 之前，color 在 display 之前，display 在 margin 之前。有些团队会强制字母序，因为这让“X 是不是已经在这里声明过？”变成一眼能扫的事情，也避免了在代码评审里争论重复属性。Google CSS Style Guide 推荐字母序（对厂商前缀做点让步）。另一些团队偏好“按概念”的顺序（定位 → 盒模型 → 排版 → 视觉 → 动画，由 SMACSS推广开来）。这些顺序里的任何一种都不会影响渲染，纯粹是审美 / 团队约定的选择。

“一行一个属性”到底做了什么？

它把每条声明放在自己一行（color: red; 在一行，padding: 10px; 在下一行，而不是把它们塞进同一行。这是几乎所有生产 CSS 的现代默认，因为它让 diff 更干净（加一个属性 = 加一行，而不是改一行），也让每条声明单独读起来更容易。反过来）一行多个声明，在 2026 年的生产代码中很少见，除了一些非常紧凑的单规则片段。

如果我的项目已经在用 Prettier 或 Stylelint，我还要用它吗？

可能不需要，你编辑器里的 Prettier 集成已经在保存时做这件事了，并且通过 PostCSS 拥有完整的 CSS AST 感知能力，Stylelint 也会在每次提交时强制执行团队约定。本工具是为你的构建流水线覆盖不到的情形准备的：从浏览器审查器粘出来的 CSS、从邮件或 Stack Overflow拿到的片段、脱离任何项目上下文的一次性格式化。对长期项目工作，请在本地把 Prettier + Stylelint 配好；对无摩擦的一次性工作而言，本工具是合适的形态。

我的 CSS 文件会被上传吗？

不会。格式化完全在你的浏览器中通过 JavaScript 运行。你粘进来的 CSS 永远不会跨越网络，你可以在点击“格式化”时打开开发者工具的网络标签页查看，或者在页面加载完成之后让它离线（飞行模式），工具仍然能用。对专有样式表、设计系统的真理之源文件、A/B 测试变体，或任何你不希望被复制到陌生人硬盘上的 CSS 都安全。

相关工具