合并他人混乱代码
接手同事离职留下的 CSS 文件，600 行代码缩进全乱，选择器有的换行有的没换，属性顺序毫无规律。手动整理至少半小时，且可能漏改。用本工具一键重排缩进和换行，再按字母序排序属性，5 秒后得到一个结构统一、可读性高的文件，后续查找和修改效率提升明显。
开发者工具 · JSON / 数据格式
CSS 格式化
缩进/排序/格式选项
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
输 入 CSS
结 果 美化
就绪 · csso 引擎（真 AST），全程本地处理
第一节
关于本工具
About接手他人项目，打开 CSS 文件发现缩进混乱、属性顺序随意——光是手动对齐就能耗掉半小时。这个工具把粘贴的 CSS 按缩进、冒号对齐、属性排序等选项重新格式化，支持多级选择器嵌套与媒体查询保持。所有处理在浏览器本地完成，代码不上传服务器，适合团队统一代码风格前批量检查或整理历史遗留样式。
使用场景
代码审查前格式化
团队要求 PR 提交前 CSS 必须格式化，但不同开发者习惯不同：有人喜欢属性按类型分组，有人习惯按字母排序。用本工具统一设置为团队约定的格式（缩进 2 空格、属性按字母排序），提交前跑一遍，确保所有 PR 的 CSS 风格一致，审查者不用再花时间纠结格式问题，只关注逻辑。
从设计稿提取样式
从 Figma 复制了一段带内联样式的 CSS，粘贴到编辑器后缩进全乱、选择器混在一起。需要快速提取出结构清晰的样式块以便复用。用本工具先格式化，再手动提取需要的部分，原本需要 10 分钟的清理工作缩短到 1 分钟，且不会遗漏花括号或分号。
对比两个版本差异
要对比旧版 CSS 和新版 CSS 的差异，但旧版缩进混乱、属性顺序随机，新版格式规整。直接对比会产生大量无意义的格式噪音。先将旧版用本工具格式化（缩进 2 空格、属性按字母排序），再和新版做 diff，看到的差异全是真正的逻辑改动，没有一行是格式干扰。
压缩前做可读备份
上线前需要将 CSS 压缩成一行，但为了后续维护，必须保留一份可读的源文件。用本工具将源文件格式化（缩进 4 空格、属性按类型分组），同时把压缩后的版本另存。以后要改样式，直接编辑格式化版本，改完再压缩，不用再对着压缩后的单行代码猜结构。
快速排查嵌套错误
写了一个带 5 层嵌套的 SCSS 编译后的 CSS，某个选择器闭合位置不对，导致后续样式全部失效。手动数花括号容易看花眼。用本工具格式化后，缩进层级一目了然，一眼看出第 3 层少了一个右花括号。修正后再次格式化确认结构正确，整个过程不到 2 分钟。
第二节
使用指南
Getting Started使用步骤
- 1在编辑区粘贴或输入 CSS 代码，右侧预览窗同步显示格式化后的样式表
- 2点击「缩进」下拉框选择空格数（2/4/8），代码块层级缩进立即调整
- 3勾选「属性排序」后，CSS 规则中的属性按字母顺序重排，预览区同步更新
- 4点击「复制结果」按钮，格式化后的 CSS 代码存入剪贴板，按钮短暂显示「已复制」
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| body{margin:0;padding:0}h1{color:red;font-size:24px} | body { margin: 0; padding: 0; } h1 { color: red; font-size: 24px; } | 常规：多规则无缩进输入，验证基础缩进与换行格式化 |
| a{color:blue;text-decoration:none}a:hover{color:red} | a { color: blue; text-decoration: none; } a:hover { color: red; } | 常规：伪类选择器与重复选择器，验证选择器排序与分组 |
| /* comment */ .foo { background: #fff; color: #333; } | /* comment */ .foo { background: #fff; color: #333; } | 边界：注释保留在独立行，验证注释不被删除或合并 |
| @media (max-width:600px){body{font-size:14px}} | @media (max-width: 600px) { body { font-size: 14px; } } | 边界：嵌套 @media 规则，验证多级缩进与花括号对齐 |
| div{width:100%;height:auto;margin:0 auto} | div { width: 100%; height: auto; margin: 0 auto; } | 常规：属性值含空格（margin缩写），验证属性值内空格不被破坏 |
| .class{color:red;color:green} | .class { color: red; color: green; } | 易错：重复属性（后覆盖前），验证工具不删除重复声明（保留原始顺序） |
| p{margin:0;padding:0;margin:10px} | p { margin: 0; padding: 0; margin: 10px; } | 易错：同名属性中间隔其他属性，验证工具不合并或排序属性（保留原始顺序） |
常见错误对照
1.选择器声明块没加花括号，导致整段失效
✗ 错误
.foo
color: red;
font-size: 14px;✓ 修复
.foo {
color: red;
font-size: 14px;
}CSS 语法要求选择器后紧跟 { } 包裹声明块。缺少花括号时，浏览器或格式化工具无法解析属性，整段规则被忽略。
2.属性值末尾多余分号，但声明块内最后一个属性本可省略
✗ 错误
.bar {
margin: 0;
padding: 0;;
}✓ 修复
.bar {
margin: 0;
padding: 0;
}CSS 规范允许最后一个属性省略分号，但多余分号不会报错。格式化工具可能保留或删除，但双分号是书写错误，应统一去掉。
3.十六进制颜色值简写错误，三位缩写成两位
✗ 错误
color: #ff0;✓ 修复
color: #ff0;三位简写规则是每位重复：如 #ff0 等价于 #ffff00。但若写成 #f0 则非法，因为十六进制颜色必须为 3、4、6 或 8 位。
4.属性值单位缺失，导致数值无意义
✗ 错误
.container {
width: 100;
}✓ 修复
.container {
width: 100px;
}CSS 中长度值必须带单位（px、em、% 等），纯数字会被视为无效值，浏览器会忽略该声明。格式化工具不会自动补单位。
5.选择器内混入注释，破坏语法结构
✗ 错误
.foo /* 注释 */ .bar {
color: red;
}✓ 修复
/* 注释 */
.foo .bar {
color: red;
}CSS 注释 /* */ 不能出现在选择器中间，否则会打断选择器解析，导致规则不生效。注释应放在选择器外部或声明块内。
6.@import 语句放在样式规则之后，违反 CSS 规范
✗ 错误
.foo { color: red; }
@import url('other.css');✓ 修复
@import url('other.css');
.foo { color: red; }CSS 规范要求 @import 必须位于样式表开头（除 @charset 外），否则浏览器会忽略该 @import。格式化工具不会自动调整顺序。
7.属性名拼写错误，导致整条声明被忽略
✗ 错误
.box {
backgound-color: blue;
}✓ 修复
.box {
background-color: blue;
}CSS 属性名必须精确匹配规范，拼写错误（如 backgound）会被视为未知属性，浏览器直接忽略该声明，不会报错。
第三节
工作原理
How It Works核心公式
缩进量 = 缩进级别 × 缩进宽度（空格数）
变量说明
缩进级别嵌套深度，根级为 0缩进宽度每级空格数，默认 2 或 4
示例
CSS 代码含 3 层嵌套（选择器→属性→值），缩进宽度设为 4 空格：第 1 层缩进 0 空格，第 2 层缩进 1×4=4 空格，第 3 层缩进 2×4=8 空格。格式化后每条属性前有 4 空格，子值前有 8 空格。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问我有一大段别人写的 CSS，缩进全是乱的，这个工具能一键排整齐吗？＋
答
可以。把混乱的 CSS 代码粘贴到输入框，选好想要的缩进风格（空格或 Tab，以及缩进长度），点格式化即可。工具会自动解析花括号和分号，重新生成层级分明的代码。如果原始代码有语法错误（比如少了个花括号），工具会尝试智能补全，但建议先检查基础语法。
问格式化之后，CSS 属性顺序变了，怎么让它按我想要的顺序排？＋
答
本工具的「排序」选项提供了多种预设顺序：按字母排序、按类型分组（如先布局后颜色）、或者不排序只格式化。如果你有特殊顺序需求，可以在格式化后手动调整，或者先用字母排序作为基础再微调。注意：排序只改变属性顺序，不影响功能。
问为什么我格式化完，某些属性值被改掉了，比如颜色从 #fff 变成了 #FFFFFF？＋
答
本工具默认开启「颜色格式统一」选项，会把所有颜色值转为大写六位十六进制（如 #fff → #FFFFFF）。如果不想改变颜色写法，可以在格式选项中关闭该功能。其他值（如数字、单位）不会被修改，只做缩进和排序。
问我代码里有浏览器前缀（-webkit-、-moz-），格式化后它们会乱吗？＋
答
不会。工具解析 CSS 时会把浏览器前缀当作普通属性名处理，格式化后前缀属性会和其他属性一起按你选的排序规则排列。建议开启「按类型分组」排序，这样同组的前缀属性会排在一起，便于检查。
问这个工具支持 Less 或 Sass 语法吗？我写的是嵌套的 SCSS。＋
答
不支持。本工具只处理纯 CSS 语法，不解析 Less、Sass/SCSS 的嵌套、变量、混入等特性。如果你把 SCSS 代码贴进去，工具可能会把嵌套规则当成语法错误处理，导致格式化结果混乱。建议先用预处理器自带的编译器转成纯 CSS 再格式化。
问代码很长，有几千行，这个工具会不会卡死或者截断？＋
答
本工具在浏览器本地运行，不限制输入长度，但性能取决于你的设备。实测 5000 行以内的 CSS 代码在主流浏览器上都能秒级完成格式化。如果代码超过 1 万行，建议分块处理，避免浏览器假死。所有处理都在本地，不会上传到服务器。
问格式化后代码反而变长了，能不能压缩成一行？＋
答
本工具只做格式化（美化），不做压缩/混淆。如果你需要把代码压缩成一行，可以先用本工具格式化，再用其他压缩工具处理。注意：压缩会移除空格和换行，适合生产环境部署，但不利于阅读和调试。
问我点格式化没反应，输入框里的代码也没变化，怎么回事？＋
答
常见原因有两个：一是输入框里是空的或者只有空格，工具不会做任何操作；二是代码有严重语法错误（比如花括号不配对），工具无法解析。建议先粘贴一小段正确 CSS 测试，确认工具正常工作。如果还不行，检查浏览器控制台是否有报错（F12 查看）。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。