什么是 CSS 格式化？

CSS 格式化是为层叠样式表添加一致缩进、换行和空格的过程，目的是让代码对人类可读。浏览器完全忽略 CSS 中的空白字符。压缩成一行的样式表和整齐缩进的样式表在渲染效果上完全相同。两者的区别在于可读性：格式化后的 CSS 让你一眼扫清选择器、发现缺失的分号，并直观理解层叠关系。

CSS 格式化工具（有时也称为 CSS 美化工具或代码美化器）将压缩或格式不一致的 CSS 重写为统一缩进、每行一条声明、大括号位置一致的形式。这是压缩操作的逆过程，也称为美化或格式化输出。压缩操作通过删除空白字符来减小生产环境的文件体积，而格式化则为开发、代码审查和代码库维护恢复代码结构。

CSS 规范（W3C CSS 语法模块第 3 级）定义了样式表的语法，但对空白字符惯例没有任何规定。格式化规则由团队决定：制表符还是空格、2 个还是 4 个空格的缩进、大括号风格、规则集之间是否留空行。格式化工具统一执行你选择的惯例，适用于每一个文件。大多数团队将惯例写入 .prettierrc 或 .editorconfig 文件。

为什么使用这款 CSS 格式化工具？

粘贴任意 CSS，毫秒内即可获得缩进整齐的输出。无需安装编辑器插件，无需编写配置文件，无需创建账户。

⚡

即时格式化

输出随着你的输入或粘贴实时更新。无需等待构建步骤或执行命令行命令，即刻获得格式化后的 CSS。

🔒

隐私优先处理

所有格式化操作均在浏览器中使用 JavaScript 本地运行。你的 CSS 不会离开你的设备，也不会发送到任何服务器。

🎨

可配置缩进

可在 2 个空格、4 个空格或制表符缩进之间选择，以匹配项目的代码风格。输出结果可直接粘贴到代码库中。

📋

无需登录

打开页面，粘贴 CSS，复制结果。无需注册，无频率限制，无功能门槛。每次访问均可使用完整工具。

CSS 格式化工具使用场景

前端开发

当你收到来自第三方库或 CDN 的压缩 CSS 时，将其格式化以读取选择器，了解它覆盖了自己样式表中的哪些内容。

后端工程

服务器渲染的页面通常将关键 CSS 内联为单行。对该 CSS 进行格式化，可以更方便地审查初始 HTML 响应中包含了哪些样式。

DevOps 与 CI 流水线

在拉取请求中通过将格式化工具输出与已提交文件进行比对，来强制执行一致的 CSS 格式规范。不一致的空白字符会产生嘈杂的差异，掩盖真正的变更。

质量保证与问题排查

在排查视觉 bug 时，将 DevTools 中的计算 CSS 格式化，可以快速识别哪些属性被应用，以及它们的优先级顺序。

数据迁移

内容管理系统和邮件构建工具通常将 CSS 存储在数据库字段中，空白字符往往被删除。对提取出的 CSS 进行格式化，有助于在重新导入前进行验证。

学习 CSS

学习 CSS 的学生可以将教程或 Stack Overflow 回答中的示例代码粘贴进来，以统一格式查看，更直观地理解嵌套结构和层叠关系。

CSS 属性排序参考

大多数 CSS 格式化工具不会重新排列属性顺序。但许多代码风格指南建议将相关属性归类在一起。下表展示了 Stylelint 的 order 插件和 CSScomb 等工具所使用的常见分组惯例：

分组	示例属性	用途
Position & Layout	position, display, float, clear	Defines the element's rendering mode
Box Model	width, height, margin, padding	Controls dimensions and spacing
Typography	font-size, line-height, color	Text styling properties
Visual	background, border, box-shadow	Decorative properties
Animation	transition, animation, transform	Motion and transform effects
Misc	cursor, overflow, z-index	Behavioral and stacking properties

此分组是一种惯例，并非 CSS 的强制要求。浏览器根据优先级和来源顺序应用声明，与规则块内属性的位置无关。格式化工具专注于空白字符和缩进；属性重排是一个独立的代码检查问题，由 Stylelint 等工具负责处理。

CSS 格式化与 CSS 压缩的对比

格式化与压缩是互逆的操作，分别应用于开发流程的不同阶段：

CSS 格式化工具（本工具）

添加缩进、换行和空格，使 CSS 易于阅读。用于开发和代码审查阶段。会增加文件大小，但对浏览器渲染毫无影响。输出结果面向人类。

CSS 压缩工具

删除所有不必要的空白字符、注释和冗余语法，以减小文件大小。用于生产构建阶段。输出结果面向浏览器和 CDN，而非供人阅读。

代码示例

如何在不同语言和环境中以编程方式格式化 CSS：

JavaScript (Prettier API)

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

Python (cssbeautifier)

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

CLI (Prettier)

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

PHP (sabberworm/php-css-parser)

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

常见问题

CSS 格式化工具与 CSS 代码检查工具有什么区别？

CSS 格式化工具只修改空白字符：缩进、换行、冒号和大括号周围的间距。它不会修改实际的 CSS 声明内容。CSS 代码检查工具（如 Stylelint）会分析代码中的错误、不良实践和风格违规，并可能建议或自动修复超出空白字符范围的问题。团队通常同时使用两者：格式化工具负责统一间距，代码检查工具负责捕捉错误。

格式化 CSS 会影响它在浏览器中的渲染效果吗？

不会。浏览器根据 W3C CSS 语法模块解析 CSS，将所有空白字符（空格、制表符、换行符）视为等价的标记分隔符。在声明、选择器或属性值之间添加或删除空白字符，不会对计算样式产生任何影响。唯一的例外是字符串值内部的空白字符，例如 content: "hello world"，格式化工具会保留这部分内容。

CSS 缩进应该使用多少个空格？

最常见的两种惯例是 2 个空格和 4 个空格。Google 的风格指南和 Prettier 的默认设置均使用 2 个空格。WordPress CSS 编码规范使用制表符。两者在性能上没有差异。选择团队已有的惯例，或与现有 JavaScript/HTML 代码保持一致即可。

这款工具可以格式化 SCSS、LESS 或其他 CSS 预处理器吗？

本工具格式化标准 CSS 语法。由于 SCSS 和 LESS 与 CSS 共享大部分语法，简单的预处理器代码通常可以正常格式化。但 SCSS 特有的结构（如 @mixin、@include 和嵌套规则集）可能无法按预期处理。对于 SCSS，建议使用 Prettier 配合 SCSS 解析器，或使用 sass-formatter 扩展。

CSS 格式化和 CSS 美化是同一回事吗？

是的。CSS 格式化工具、CSS 美化工具和 CSS 代码美化器指的是同一操作：为 CSS 代码添加一致的空白字符。不同工具叫法不同，但输出结果相同：每行一条声明、缩进整齐、便于阅读的 CSS。

为什么格式化后的 CSS 行数与原来不同？

压缩或未整理的 CSS 通常将多条声明放在同一行，或省略规则集之间的换行。格式化工具在每条声明后添加换行，在规则集之间添加空行，从而增加了行数。实际的 CSS 内容（选择器、属性、属性值）保持不变。

应该将格式化后的 CSS 还是压缩后的 CSS 提交到版本控制系统？

应提交格式化后的 CSS。版本控制的差异是基于行的，因此每行一条声明的格式化 CSS 会产生清晰、便于审查的差异。压缩后的 CSS 会产生单行差异，根本无法审查。压缩操作应作为构建步骤执行，而不是作为源代码格式。PostCSS、cssnano 或你的打包工具的 CSS 插件会自动处理生产环境的压缩。

CSS 格式化工具