CSS 格式化工具

CSS 格式化工具可在浏览器中实时将压缩或凌乱的样式表转换为整洁、缩进规范的 CSS。粘贴压缩的生产样式表或一团手写规则，格式化结果会立即显示在右侧面板，每行一条声明、间距统一。

基于 Prettier 及其 PostCSS 解析器构建，因此选择器、属性、媒体查询和 at 规则都会按照可靠的行业标准风格进行格式化。

常见使用场景

展开压缩样式表

将单行压缩的 CSS 文件展开为可读规则，便于检查、调试和编辑。

清理规则

规范化从多种来源复制的 CSS 的间距、缩进和换行。

审阅与学习

在重复使用之前，让来自 DevTools、教程或生成器的样式表易于阅读。

如何格式化 CSS

粘贴你的样式表

在左侧的输入面板中键入或粘贴 CSS。你也可以上传 .css 文件，或点击示例加载样例。

即时查看输出

在你输入时，带语法高亮的格式化样式表会自动显示在右侧面板。行号和实时大小计数器让大文件更易于浏览。

调整选项

选择缩进（2、3、4、8 个空格或 Tab），并设置行宽以控制长行换行。输出会立即重新格式化。

复制或下载

点击复制获取结果，或点击下载将其保存为 .css 文件。使用编辑在导出前手动微调输出。

所有处理均在本地完成。你的样式表完全在浏览器中格式化，绝不会上传到服务器。

功能与选项

格式化选项

Prettier 的 CSS 格式化大多是自动进行的，并提供两个选项让输出贴合你的偏好。每次更改都会立即重新格式化结果。

选项	可选值	控制内容
缩进	2 · 3 · 4 · 8 空格 · Tab	用于嵌套规则和声明的缩进宽度与字符。
行宽	80 · 100 · 120	在长值和选择器列表换行之前的目标行长。

会被格式化的内容

选择器与声明

一致的缩进、每行一条声明，以及冒号和花括号周围整洁的间距。

媒体查询与 At 规则

嵌套的 @media、@keyframes 及其他 at 规则会被正确缩进和对齐。

内置工具

实时格式化

输出随输入即时更新，带有语法高亮和行号。

上传与下载

加载本地 .css 文件，或一键导出格式化结果。

可编辑输出

将结果面板切换到编辑模式，在复制前进行手动微调。

第一次使用？点击示例加载一段刻意凌乱的样式表，看它如何被即时格式化。

常见问题

我的 CSS 会被发送到服务器吗？

不会。所有格式化都在你的浏览器本地完成。你的样式表绝不会被上传、记录或存储，因此格式化专有或未发布的 CSS 也很安全。

它使用哪种格式化引擎？

它使用搭配 PostCSS 解析器的 Prettier，这是在真实项目中广泛用于保持样式表一致的同一款格式化工具。输出遵循可靠而通用的风格。

它能处理媒体查询和关键帧吗？

能。嵌套的 at 规则如 @media 和 @keyframes 会与标准选择器和声明块一起被正确缩进和对齐。

我可以自定义输出吗？

可以。在工具栏中设置缩进大小和行宽，以控制缩进以及长行的换行位置。输出会立即重新格式化，便于预览更改。

它也会压缩 CSS 吗？

本工具是美化工具——它会展开并缩进 CSS 以提升可读性，而不是压缩它。若要为生产环境缩小样式表，请使用专门的 CSS 压缩工具。

如果 CSS 无效会怎样？

如果解析器无法理解输入，工具会显示描述问题的信息，而不会产生损坏的输出。修复所报告的问题后，格式化结果会重新出现。