数据

CSS 格式化

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

  • 把一整行或压缩后的 CSS 还原成可读样式表，每条声明独占一行、缩进一致
  • 基于真正的语法树重新排版，选择器、取值、at 规则与渲染结果都保持原样
  • 缩进可选两个空格、四个空格或 Tab，匹配团队风格
  • 全部在浏览器内运行，第三方 CSS、客户项目或任何未发布内容都不离开本机
工具/CSS 格式化
正在加载格式化引擎
8%
Prettier 引擎只需下载一次，本次访问期间会被缓存。
缩进

功能简介

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

  1. 01

    基于解析器重排

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

  2. 02

    一致、可预期的排版

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

  3. 03

    缩进由你决定

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

  4. 04

    理解 at 规则与现代 CSS

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

  5. 05

    行数与字节数

    输出面板会显示格式化后的样式表展开成多少行、有多大，让你一眼看出原文到底有多密。

  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 可读的空白，一个把它去掉。

  1. 格式化可逆且安全

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

  2. 压缩后的 CSS 为何难读

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

  3. 它不是「反压缩」

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

  4. 天生幂等

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

  5. 仅限标准 CSS

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

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

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

使用建议

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

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

边界与注意事项

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

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

常见问题

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

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

不会。它只加回浏览器忽略的空白与换行：缩进、规则之间的空行、每条声明独占一行。选择器、取值和 at 规则都不动，所以页面渲染前后完全一样。

它能完全反转压缩吗？

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

有哪些缩进选项？

缩进可选两个空格、四个空格或 Tab。单引号选项会在安全的前提下切换字符串和 url() 的引号，浏览结果时还能全部折叠、全部展开或开启自动换行。

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

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

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

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

我的 CSS 会被上传吗？

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

更多相关工具

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