CSS 格式化工具

CSS 格式化工具会把样式表整理成一致、清晰、便于阅读的结构。选择器、声明、媒体查询、关键帧、变量和预处理器输出会比压缩或缩进混乱的代码更容易检查。它适合调试、代码评审、设计系统维护、教学，以及理解从其他来源复制来的样式。格式化不会自动改变级联、优先级、继承或浏览器兼容性。看起来很小的一条规则，如果加载顺序靠后或选择器很强，仍可能造成很大影响。生产环境修改还应检查响应式状态、视觉回归、lint、构建输出和组件上下文。

CSS 格式化是一个词法分析 + 美化打印的问题，而非完整解析。一个符合规范的 CSS 解析器（CSS Syntax Module Level 3，W3C 推荐标准）比格式化器所需的要重得多：它需要构建包含样式规则、at 规则、声明和组件值的 AST，并处理各种解析边界情况（未终止的字符串、不匹配的花括号、带厂商前缀的属性）。本页面使用更轻量的分词器，遍历字符流，识别相同的词法单元类别（标识符、at 关键字、哈希、字符串、错误字符串、数字、尺寸、百分比、url、函数、标点符号、注释），将它们输出为扁平列表，然后美化打印器根据选定的缩进、花括号风格和空白规则重新组装这些词法单元。 CSS 中的两个结构单元是规则块（selector { declarations }）和 at 规则块（@media、@supports、@container、@keyframes 包裹一个或多个规则块）。格式化器遍历词法单元流并跟踪花括号深度：遇到 { 时深度递增（随后换行并缩进），遇到 } 时深度递减（缩进缩小到匹配对应 { 的层级）。选择器原样输出 — 格式化器不解析选择器，因为解析像 `.foo > .bar:hover:not(.baz)` 这样的选择器是另一个问题（CSS Selectors Level 4）。选择器逐字节保留，仅对空白进行规范化（多个空格合并为一个，移除尾部空白），这样压缩后的 `.a,.b,.c` 会格式化为 `.a, .b, .c`。 声明按选定风格格式化：'expanded'（每个属性独占一行，可读性最好）、'compact'（每条规则一行，多个声明紧凑排列，生产环境 CSS 中最常见）或 'compressed'（压缩，无空白，输出体积最小）。属性名后的冒号后面始终跟一个空格；值除少数规范化外原样输出（去掉 `0.500` 的尾部零变为 `.5`，去掉 `0px` 的单位变为 `0`，这些都是经典的 CSS 压缩技巧）。 压缩是反向操作：移除注释、折叠声明内部和声明之间的空白、删除块中最后一个声明后的尾部分号（CSS 2.1 第 4.1.7 节允许）、合并具有相同选择器和媒体上下文的相邻规则块、规范化颜色值（`#ffffff` -> `#fff`，`rgb(255,255,255)` -> `#fff`，尽可能转换）。现代压缩工具（cssnano、lightningcss、clean-css）还会做结构性优化：将简写属性合并为缩写（`margin-top: 1px; margin-right: 1px; margin-bottom: 1px; margin-left: 1px;` -> `margin: 1px;`）、删除规则内的重复声明、在死代码消除阶段移除不匹配任何元素的规则（如 `div:has-no-children { color: red; }`）。对于压缩输出，本页面应用标准转换；对于人类可读输出，应用选定的缩进和花括号风格。 CSS Nesting Module（CSSWG，2023 年起草，2024 年 Baseline）引入了原生嵌套：`.a { color: red; & .b { color: blue; } }` 在现代浏览器中是合法的 CSS（Chrome 112+、Firefox 117+、Safari 16.5+）。2024 年之前的嵌套需要预处理器重写（Sass 的 `&` 或 Less 的 `&` 来链式拼接选择器）。本页面两种都支持：预处理器嵌套的 CSS 按 SCSS / Less 的方式格式化（保留 `&`），原生嵌套的 CSS（不需要 `&`）则按规则块遍历方式格式化。 本页面处理的其他 at 规则：@keyframes 和 @counter-style 接收声明体而非嵌套规则块，因此格式化方式不同（at 规则内的声明，无嵌套花括号）。@media、@supports、@container、@layer 接收规则块体。@import、@charset、@namespace 仅在顶层使用，独占一行输出。@property（注册自定义属性）接收声明块。@font-face 是一个没有选择器的单一规则块。本页面按规范定义的体形状来处理每种 at 规则，而非按名称。 最常见的格式化陷阱是破坏字符串字面量内的内容：`content: "hello world";`、`font-family: "Arial Black", sans-serif;`、`background: url("image.png")` — 格式化器不得折叠字符串内的空格，不得在 `/` 处拆分 URL，不得触碰 `/* ... */` 内的注释文本。一个能正确跟踪字符串状态和注释状态的分词器，是能忠实保留用户内容的格式化器与会破坏内容的格式化器之间的关键区别。本页面的分词器是手写的，体量小到可以通过肉眼验证；生产级格式化器使用 postcss 或 lightningcss，它们的内部词法分析器承担着相同的义务。

• 词法分析（CSS Syntax Level 3）：遍历字符流，输出标识符 / at 关键字 / 哈希 / 字符串 / 数字 / 尺寸 / 百分比 / url / 函数 / 标点符号 / 注释词法单元。字符串和注释有状态 — 分词器行为异常会破坏 `content: "hello world";`。
• 两个结构单元：规则块（selector { declarations }）和 at 规则块（@media、@supports、@container、@layer 包裹规则块）。格式化器遍历花括号深度，每个 `{` 缩进一级；匹配的 `}` 缩回一级。
• 选择器原样输出，空白规范化：`.a,.b,.c` -> `.a, .b, .c`。格式化器不解析选择器（CSS Selectors Level 4 是另一个问题） — 只清理空格和逗号。
• 输出风格：'expanded'（每条声明一行，可读性最好）、'compact'（每条规则一行，生产环境常见）、'compressed'（无空白，压缩）。属性名后的冒号 + 空格是唯一的通用格式规则。
• 压缩：移除注释、折叠空白、删除尾部 `;`、合并相同选择器的规则、规范化 `#ffffff` -> `#fff`、`0.500` -> `.5`、`0px` -> `0`。结构性合并：简写 -> 缩写（`margin-top: 1px; ... margin-left: 1px;` -> `margin: 1px;`）。
• CSS Nesting（CSSWG 2023，Baseline 2024）：`.a { & .b { ... } }` 在 Chrome 112+、Firefox 117+、Safari 16.5+ 中是原生 CSS。2024 年之前的预处理器嵌套（Sass `&`、Less）仍然有效；本页面通过遍历规则块结构来格式化两种写法。
• at 规则体：@keyframes 和 @counter-style 接收声明；@media / @supports / @container / @layer 接收规则块；@import / @charset / @namespace 是顶层语句；@property 和 @font-face 接收声明块。本页面按规范定义的体形状而非名称来处理每种 at 规则。
• 安全边界：字符串字面量（content、字体名、URL）和注释文本在所有转换中保持不变。字节精确往返是 CSS 格式化器的正确性检验标准 — 破坏一个 content 字符串用户会立即发现。