数据

CSS 格式化

压缩过或随手挤在一起的 CSS 往往是一整行：没有缩进，规则之间没有空行，一条条声明首尾相连。它在浏览器里照样能用，却没法读、没法审查、也没法改。这个格式化工具会把那一坨文本重新排成样式表该有的样子——每条声明独占一行、缩进一致、规则之间留出空行。它先把 CSS 解析成真正的语法树，所以渲染结果分毫不动，改变的只是排版。缩进风格可以自己选，全部在浏览器内完成。

正在加载格式化引擎
8%
Prettier 引擎只需下载一次，本次访问期间会被缓存。
缩进

功能简介

读一份不是自己写的、或被构建步骤压扁的样式表，第一步就是把它还原成眼睛能跟得上的样子。这个工具做到这一点，同时绝不擅自改动 CSS 的含义。

  1. 01

    基于解析器重排

    CSS 会先被读成语法树再打印出来，工具理解的是选择器、声明块和 at 规则，而不是凭感觉断行。从语法树出来的排版不会悄悄改坏取值或丢掉规则。

  2. 02

    一致、可预期的排版

    每条声明各占一行，嵌套自始至终用同一种缩进，相邻规则之间以空行分隔，你也可以把空行关掉。相同输入总是得到相同输出，结果稳定到可以提交和做 diff。

  3. 03

    缩进由你决定

    选两个空格、四个空格或 Tab，让嵌套读起来符合团队习惯；再一键全部折叠或展开，浏览结果时还能开关自动换行。

  4. 04

    理解 at 规则与现代 CSS

    媒体查询、容器查询、supports 块、层叠层、关键帧、自定义属性与嵌套规则都会按正确缩进排好，而不是被当成纯文本处理。

  5. 05

    看得懂的错误提示

    CSS 解析不了时，原因、行号列号和出问题那一行的片段会一起显示，于是你能直接找到那个多余的花括号，而不用猜格式化在哪里放弃了。

  6. 06

    复制、下载或上传

    从剪贴板粘贴、从磁盘打开 .css 文件，再复制整洁的结果或保存下来。整个过程都在本机，不经过服务器。

如何使用

几步就能把一坨没法读的 CSS 变成整洁、缩进一致的样式表。

  1. 01

    把压缩或杂乱的 CSS 贴进输入面板，或用「上传」从磁盘打开 .css 文件。

  2. 02

    选好缩进风格，再按团队习惯决定是否开启单引号和规则间空行。

  3. 03

    在右侧查看格式化后的 CSS，每条声明独占一行、规则间留空，随你调整选项实时更新。

  4. 04

    复制结果或下载为 .css 文件，放进编辑器去读、去审查或继续修改。

功能说明

这些细节让格式化结果值得信任、用着省心。

  • 基于 Prettier，从已解析的结构重排，而不是靠猜测在哪里插入换行。
  • 随输入和选项变化即时格式化，结果更新前无需点任何按钮。
  • 语法错误会连同原因、位置和出错那一行一起报出来，而不是产出半成品或空白。
  • 输入和格式化结果都带完整的 CSS 语法高亮，浅色深色主题都适配。
  • 不上传、不记录。你粘贴的 CSS 留在浏览器里，关掉标签页即消失。

适合哪些场景

把密集的 CSS 还原成可读形态，在这些场景里很值。

  1. 读一份压缩样式表

    当一份样式表只剩生产环境或 CDN 上的压缩文件时，在这里格式化，就能看清规则和选择器到底是怎么组织的。

  2. 审查第三方或生成的 CSS

    框架、CSS-in-JS 工具或第三方组件的产出常常是压扁的。格式化之后才谈得上代码审查或审计。

  3. 排查优先级或覆盖问题

    排好版的 CSS 让你更容易发现重复的选择器、放错位置的声明，或某条悄悄覆盖你样式的 at 规则。

  4. 得到干净的 diff

    用同样的方式格式化样式表的两个版本，diff 工具就能显示真正的改动，而不是被空白噪声淹没。

  5. 整理粘贴进来的 CSS

    从文档、网上回答或聊天里复制的片段，空格风格往往不一致。一次处理就统一到你的缩进风格。

  6. 教学与分享示例

    排版一致的样式表，在教程、代码注释或合并请求里比东拼西凑的空格更容易讲清楚。

延伸阅读

要上线而不是阅读？CSS 压缩 把同一份 CSS 朝相反方向压缩；而脚本则可以用JavaScript 格式化 把 JavaScript 排成同样可读的样子。而当这份样式表不是独立文件、而是嵌在页面里时，把标记和其中的 CSS 一起格式化的是 HTML 格式化。

格式化与压缩

格式化和压缩是同一个思路朝相反方向走：两者都只动浏览器忽略的字符，从不改变含义。一个加回让 CSS 可读的空白，一个把它去掉。

  1. 格式化可逆且安全

    加缩进、换行和空格，对页面如何渲染毫无影响。浏览器把一行和四十行视为相同，所以格式化是给人看的呈现变化，而不是对样式的重写。

  2. 压缩后的 CSS 为何难读

    构建步骤为省字节去掉每一个可选的空格和换行。这对上线很理想，却留下一整行——选择器、声明块和下一条规则全挤在一起，没有任何视觉边界。

  3. 它不是「反压缩」

    格式化恢复的是排版，不是原始源码。被压缩去掉的注释回不来，被合并或重排的规则仍保持那样。你得到的是可读的 CSS，不是作者所写内容逐字节的副本。

  4. 天生幂等

    对已经格式化的 CSS 再格式化，会得到完全相同的文本。因为输出是确定的，可以安全地在每次保存或提交钩子里运行，不会产生只有噪声的改动。

  5. 仅限标准 CSS

    它格式化的是纯 CSS。Sass、Less 等预处理器语法必须先编译，因为解析器期望的是浏览器真正会收到的 CSS。

  6. 一个用来读和审查的工具

    重点是理解：让一份被压扁或陌生的样式表易于浏览、diff 和推理。要上线，你仍然用压缩——那正是这一步的镜像。

使用建议

一些习惯，能把 CSS 格式化的价值用满。

  • 用格式化工具来读和审查，但在你手上有原始可读源码时，仍以它为准。
  • 一个项目固定一种缩进风格并坚持下去，格式化后的文件之间才能干净地 diff。
  • 读陌生 CSS 时保留规则间空行；要把结果贴到别处、希望它尽量短又不难读时再关掉。
  • 记住格式化不会找回注释、也不会还原被压缩合并的规则；它恢复的是排版，不是原始源码。
  • 对自己的代码库，把格式化接进编辑器或提交前钩子，文件就能保持一致，不必每次手动粘贴。
  • 先把 Sass 或 Less 编译成纯 CSS 再格式化，预处理器专有语法本身并不是合法的 CSS。

边界与注意事项

这个工具做什么，又把什么留给其他步骤。

  • 它重排单段标准 CSS，不打包 import、不解析 URL，也不添加浏览器前缀。
  • 它恢复的是排版，不是丢失的信息。被压缩去掉的注释和结构不会回来。
  • Sass、Less、Stylus 等预处理器源码必须先编译成 CSS，因为这里只能解析标准 CSS。
  • 语法错误会中止格式化并报出位置，所以严重损坏的输入不会悄悄产出半成品。
  • 文件在浏览器里读取，因此上传上限是 2 MB，更大的样式表建议在编辑器里打开。

常见问题

关于格式化 CSS 以及何时使用的常见问题。

格式化会改变我的 CSS 渲染效果吗？

不会。它只加回浏览器忽略的空白与换行：缩进、规则之间的空行、每条声明独占一行。选择器、取值和 at 规则的含义不变，唯一的改写只在写法层面，比如把 .5rem 打印成 0.5rem，所以页面渲染前后完全一样。

它能完全反转压缩吗？

它反转的是排版，不是信息。格式化恢复可读的空白和缩进，但压缩去掉的注释没了，被它合并或重排的规则仍然那样。你得到的是干净可读的 CSS，不是原始源码逐字节的副本。

有哪些格式化选项？

缩进可选两个空格、四个空格或 Tab，相邻规则之间是否留空行也由你决定。单引号选项会在安全的前提下切换字符串和 url() 的引号，浏览结果时还能全部折叠、全部展开或开启自动换行。

如果我的 CSS 有语法错误会怎样？

格式化会停下来，并告诉你出了什么问题：原因、行号列号，以及那一行本身和指向问题处的标记。它不会给出半成品，因为一个猜着绕过多余花括号的格式化工具，等于在重排它并不理解的代码。

这里能格式化 Sass、Less 或 SCSS 吗？

不能直接处理。本工具格式化的是浏览器接收的标准 CSS。请先把 Sass 或 Less 编译成 CSS 再贴进来，或使用理解你预处理器语法的格式化工具。

它会保留我的媒体查询和自定义属性吗？

会。媒体查询、容器查询、supports 块、层叠层、关键帧、自定义属性与嵌套规则都会被正确解析并排好。结构是被理解的，而不是当成纯文本，所以合法的 CSS 经格式化后含义不变。

我的 CSS 会被上传吗？

不会。一切都在浏览器里运行。你粘贴的 CSS 和打开的文件都在本地处理，从不传输或存储，关掉标签页就消失，第三方样式和未发布的工作都很安全。

更多相关工具

继续使用数据与格式工具箱的其余部分。