如何使用 CSS Formatter 格式化和美化 CSS

先了解这个工具能做什么

CSS Formatter 用于整理 CSS 的缩进和排版，也支持将代码压缩成更紧凑的形式。它适合在代码阅读、提交前整理或需要切换显示方式时使用。你可以提供 CSS 文本，选择美化或压缩模式，并调整缩进级别。

格式化 CSS 的操作步骤

1. 将 CSS 代码粘贴到输入区域。主输入为空时，如果同时提供了非空的备用 CSS 内容，工具会改用备用内容；如果输入为空或只包含空白字符，则会成功返回空结果。
2. 选择输出模式。未指定模式时，非空输入默认使用美化模式；选择 minify 时，工具会移除块注释、合并空白，并清理花括号、分号和冒号周围的空白。其他可正常处理的模式值会采用美化方式。
3. 设置缩进级别。非空 CSS 的缩进会转换为整数，只有 0 到 8 之间的值会被保留；无法转换或超出范围时会改用 2。通常可从 2 或 4 开始，根据团队的代码风格调整。
4. 执行格式化并查看结果。非空输入需要是字符串，且 UTF-8 字节数不能超过 1,000,000；满足条件并且格式化所需组件可用时，工具会返回处理后的 CSS。

如何查看和理解结果

美化结果通常会加入换行并使用一致的缩进，便于阅读和继续编辑；压缩结果则会减少注释、空白以及特定符号周围的空格，适合需要更紧凑文本的场景。空输入或纯空白输入的结果为空，输入和输出大小均为 0，并且不会触发大小、缩进、模式或格式化组件检查。

如果非空请求失败，先确认传入的是字符串，再检查内容大小和所选模式。格式化组件不可用时，非空输入也可能在处理前失败。已经排版好的 CSS 仍可以提交处理，但工具是否成功只说明这次格式化请求的处理结果，不代表其他 CSS 检查结果。

使用示例

你正在整理一段单行 CSS，希望先得到便于阅读和继续编辑的排版。

将 .card{color:red} 作为 CSS 输入，选择美化模式并设置 2 级缩进，然后执行格式化。

结果应为经过处理的 CSS 文本：美化模式会呈现换行和一致缩进，压缩模式会减少注释及特定位置的空白。

使用限制

• 非空请求不是无条件成功：输入类型、内容大小和格式化所需组件是否可用都会影响处理结果。

常见错误

• 输入不是字符串或非空内容超过 1,000,000 个 UTF-8 字节时，请先转换为 CSS 文本并缩短或拆分过大的内容，再重新处理。

常见问题

不输入 CSS 也能使用吗？

可以。空字符串或只含空白字符的输入会成功返回空结果，输入和输出大小均为 0；非空输入则仍需满足类型、大小和处理条件。

如何压缩 CSS？

可以。选择 minify 模式后，工具会移除块注释、合并空白，并清理花括号、分号和冒号周围的空白；其他可正常处理的模式值使用美化方式。

缩进级别应该如何设置？

非空 CSS 可以设置 0 到 8 的整数缩进。无法转换或超出这个范围的值会改用 2；纯空白输入会提前返回，不执行这项规范化。