CSS 美化的工作原理
美化器逐字符读取样式表，追踪每个块的嵌套深度，然后以一致的间距重新输出。它不会改变样式的任何效果——只改变代码的外观。
- 词法分析. 库将输入扫描为一系列词元（token）：选择器、属性名、值、at 规则、注释，以及分隔它们的花括号、冒号和分号。字符串和 url() 值被识别为单一单元，因此 content 属性中的花括号不会被误判为块分隔符。
- 追踪嵌套. 在遍历词元流时，美化器维护一个实时缩进级别。任何左花括号——无论是规则块、媒体查询还是关键帧块——都会使级别加深，每个右花括号使级别退回。这个深度决定了输出中每行前方的缩进单位数量。
- 应用选项. 缩进选择（2 个空格、4 个空格或 Tab）确定一个缩进层级的宽度。花括号风格决定左花括号是紧跟在选择器后面，还是独占一行。其余开关可在规则块之间添加空行，或将分组选择器拆分到独立行。
- 重新输出. 最后，格式化器按照计算好的缩进和换行规则打印词元，每个声明独占一行，每个冒号后加单个空格。结果是相同的样式表，以人类可以扫描层叠结构的方式呈现。
为什么要美化 CSS
- 阅读压缩样式表. 生产 CSS 以单行形式发布，规则之间没有间距。美化可以恢复换行和缩进，让您即使没有 source map 也能找到布局 bug 背后的选择器，并查看其确切的声明内容。
- 整理格式不一致的文件. 多人协作的样式表往往出现混合缩进和花括号风格。一次美化能将整个文件统一为单一布局，使下一次 diff 只显示真正的层叠变更，而不是空白噪音。
- 本工具不拖累页面. 大多数在线格式化工具在您打开页面时就加载整个库。本工具只在您点击「美化」或开启实时模式时才延迟加载 js-beautify，因此打开页面只消耗几千字节而非几百千字节，初始渲染保持快速。
- 代码不离开您的浏览器. 美化器完全在您的设备上运行。您的 CSS 从不上传到服务器——当您审查的样式表属于客户、包含内部类名或受保密协议约束时，这一点尤为重要。
常见应用场景
凡是需要阅读并非为了可读性而编写的样式表时，美化 CSS 就派上用场。
- 调试生产环境：从 Network 面板复制压缩样式表，粘贴到这里，找出覆盖了预期布局的规则。
- 代码审查准备：在提交 PR 前，将贡献者缩进不一致的样式表重新格式化，让审查者看到层叠变更，而不是布局杂乱。
- 学习与审计：展开框架或组件库的样式表，研究其选择器、媒体查询和自定义属性的结构。
一个实际示例
取一个压缩的单行代码：a{color:red;margin:0}b{padding:0}。将缩进设为 2 个空格、花括号风格设为收紧，粘贴到上方并点击美化。您将得到可读的块：a { 独占一行，color: red; 和 margin: 0; 声明各自缩进一级，右花括号对齐在选择器下方，b 规则紧随其后。将花括号风格切换为展开，每个左花括号将独占一行。缩进改为 Tab，每个层级从两个空格变为 Tab 字符。样式完全一致，只有布局不同。
FAQ
这在我的浏览器中运行吗？
是的。js-beautify 库在您第一次点击「美化」或启用实时模式时延迟加载，然后缓存。您的 CSS 不会离开页面——没有服务器往返，也没有上传。
美化与反压缩是同一回事吗？
它可以恢复可读的格式——缩进、换行和间距——但无法找回压缩时删除的注释，或恢复文件中从未存在的结构。它只对现有的声明和选择器重新格式化。
美化会改变样式的渲染效果吗？
不会。美化只增减空白和换行；层叠不受影响，页面渲染效果完全一致。属性顺序、优先级和值都保持原样。
花括号风格选项是什么意思？
「收紧」将左花括号保留在选择器同一行（a {），这是常见的 CSS 惯例。「展开」将每个左花括号放到独占的新行。空行和每个选择器独占一行的开关控制规则块之间的间距，以及 h1, h2, h3 等分组选择器的布局方式。
浏览器端 CSS 美化让您无需构建步骤或上传就能获得可读的样式表。粘贴压缩或混乱的文件，选择缩进和花括号风格，然后复制或下载结果。代码不离开您的设备，无需账户，库只在您需要时才加载——打开本页面只花费几千字节，而不是几兆字节。