CSS 美化工具

CSS 美化工具可将经过压缩、混淆或缩进不一致的样式表重新格式化为干净、易读的 CSS——一致的缩进、排序后的属性，以及规则之间清晰的间距——让你真正能够阅读、审查和编辑它。粘贴压缩后的样式表、打包的 CSS 文件，或凌乱的手写 CSS，即可立即获得格式化后的输出。

• •缩进：2 个空格、4 个空格或制表符，通过真实的 js-beautify 格式化引擎应用
• •属性排序：在每个规则块内按字母顺序排列声明，形成一致、易于扫描的风格
• •媒体查询排序：按断点对顶层 @media 块排序，min-width 升序、max-width 降序
• •规则间距：在规则之间添加空行以实现视觉分隔，或保持输出紧凑
• •注释保留：格式化时保留或删除 /* ... */ 注释
• •颜色规范化：在通道允许的情况下，将 6 位十六进制颜色和 rgb() 值缩短为 3 位十六进制简写

• •阅读压缩后的生产环境样式表，在浏览器开发者工具中调试布局问题
• •重新格式化从聊天消息、PDF 或邮件中粘贴的、丢失原始缩进的 CSS
• •在代码审查前统一属性顺序和缩进
• •让打包或生成的样式表——来自 CSS-in-JS 构建或预处理器输出——足够可读以便审查
• •在提交前清理从设计工具导出的 CSS

1. 1.将 CSS 粘贴到输入编辑器，或上传 .css 文件
2. 2.选择缩进——2 个空格、4 个空格或制表符
3. 3.根据需要开启注释保留、属性排序、媒体查询排序、规则间距和颜色规范化
4. 4.格式化后的输出会随输入自动显示
5. 5.复制输出或下载为 .css 文件

• •按字母顺序排序属性可能会将逻辑相关的声明分开，例如 margin 和 margin-top——在将其作为严格的风格规则采用之前，请先检查排序后的输出
• •带厂商前缀的属性（-webkit-、-moz-）会与其无前缀的对应项一起排序，这可能会将带前缀的回退方案排在标准属性之后
• •花括号检查器会在你输入时标记不匹配的 { 和 }，但这是一种启发式扫描，而非完整的 CSS 解析器——无法捕获所有类型的无效语法

• •这是一个格式化工具，不是代码检查工具——它不会捕获无效的属性名、浏览器兼容性问题，或选择器优先级冲突
• •非常大的样式表（数 MB 的打包文件）在浏览器中美化可能较慢——对于大规模代码库格式化，集成于构建工具的格式化程序（Prettier、Stylelint --fix）更为合适
• •要在团队范围内强制执行一致的 CSS 风格，集成在编辑器/CI 中的专用工具（如 Stylelint 或 Prettier）比临时的浏览器格式化更合适

如果你有可读的 CSS，需要为生产环境进行压缩——减小文件体积和页面加载时间——请改用 CSS 压缩工具。它会折叠空白、缩短颜色值，并可以删除多余的零以实现最大压缩。