CSS格式化工具

格式化改变排版，不等于修复样式

一段.card{color:#333;margin:0 auto}可以被展开为带缩进、换行和统一空格的多行 CSS，选择器、属性和值仍来自原输入。格式化的目的主要是阅读、代码审查和定位规则层级；它不会替你补全业务选择器、判断属性是否符合某个浏览器版本，也不会把 SCSS 或 Less 编译为 CSS。

页面提供“美化”和“压缩”两个方向。当前 CSS 格式化页默认处于美化模式；切到压缩模式会进入对应的 CSS 压缩页面。输入变化、缩进设置或模式变化后，输出会在短暂延时后重新生成，同时展示输入与输出的字符数、行数；压缩模式还会显示体积变化比例。

缩进选项会怎样作用于输出

美化模式可选择 2、4 或 8 作为缩进宽度，并在空格与制表符之间切换。空格模式会按所选数量缩进嵌套块；制表符模式改用 Tab 字符表示层级。工具不会提供属性排序、自动前缀、简写展开或规则合并开关，因此不要把输出理解为团队完整的代码风格检查结果。

输入区可加载内置示例、清空内容并显示字符与行数；输出区为只读，可复制或下载为formatted.css。桌面端输入与输出并排展示，较窄屏幕则上下排列，处理逻辑相同。

从压缩代码得到可读版本

1. 粘贴标准 CSS

   把完整样式表或一段规则放入输入区。若内容来自构建产物，先确认没有把 JavaScript、HTML 标签或源映射注释之外的文本一起复制进来。

2. 选择缩进

   个人阅读可先用 2 个空格；项目已有规范时改为 4、8 个空格或 Tab。设置变动会重新生成结果。

3. 检查嵌套层级

   重点查看@media、@supports、关键帧和较深的规则块是否符合预期。若输入本身缺少花括号或分号，应回到源码修正，而不是只看排版后的外观。

4. 复制或下载

   输出确认无误后使用复制按钮，或下载formatted.css。准备提交代码时，再运行项目自己的解析、校验与测试流程。

一组可复现的前后对照

输入以下单行内容，并保持“2 Spaces”与空格缩进：

.card{color:#333;margin:0 auto}@media (max-width:600px){.card{margin:0}}

输出会展开为：

.card {
  color: #333;
  margin: 0 auto
}

@media (max-width:600px) {
  .card {
    margin: 0
  }
}

这个结果说明格式化器会整理块级结构与空白，但不会强制给最后一条声明补分号，也不会改写margin值。把缩进宽度改为 4 后，嵌套规则会使用更宽的层级间距；改成 Tab 后，视觉宽度由查看器的 Tab 设置决定。

格式化时常见的疑问

交付前还要检查这些边界

格式化结果是排版后的文本，不是浏览器兼容性报告、CSS 语法证明或生产构建产物保证。

• 输入若含未闭合注释、字符串或花括号，格式化器可能报错，也可能给出仅供排查的尽力结果。
• 页面没有属性排序、去重、自动前缀、无用规则删除或 SCSS/Less 编译功能。
• 下载文件名固定为formatted.css；替换项目文件前先保留原版，并检查编码与换行约定。
• 大型样式表会增加浏览器内存与编辑器渲染开销，必要时按模块分段检查。

可以先加载页面示例确认缩进风格，再粘贴自己的片段，并对照浏览器或项目测试结果完成最终复核。