原始 CSS
选项
美化后的 CSS
关于此工具
CSS 美化与压缩工具是一个全面的 CSS 代码格式化和优化工具。无论您是在调试第三方 CSS、为生产环境优化样式表，还是维护大型代码库，干净且格式良好的 CSS 对于可读性和性能都至关重要。此工具可以立即将压缩的 CSS 美化为具有适当缩进的可读格式，或将开发 CSS 压缩以减小文件大小，加快页面加载速度。高级功能包括属性排序（按字母顺序组织以保持一致性）、颜色优化（缩短十六进制代码，如 #ffffff 变为 #fff）、媒体查询排序（按从小到大的断点组织）以及语法验证以捕获缺失的大括号或分号。所有处理都在浏览器客户端进行——不会将任何 CSS 上传到服务器，因此对生产样式表和客户项目是安全的。
使用方法
- 将 CSS 粘贴或输入到输入面板中
- 选择模式：选择美化以使用适当的缩进（2 个空格、4 个空格或制表符）格式化压缩或混乱的 CSS，或选择压缩以用于生产
- 实时验证：工具突出显示语法错误（未闭合的大括号、缺失的分号、无效的属性）
- 高级选项：
- 属性排序：在每个规则内按字母顺序组织 CSS 属性（提高 Git diff 可读性）
- 颜色优化：缩短颜色代码（#ffffff → #fff，rgb(255,0,0) → #f00）
- 媒体查询排序：从最小到最大断点重新排序 @media 查询
- 压缩级别：正常（安全）或激进（最大压缩）
- 保留注释：保留或删除代码注释
- 适用于 CSS3、供应商前缀、CSS 变量、嵌套选择器和 @supports/@media 规则
常见用例
- 生产优化：将网站的 main.css 从 150KB 压缩到 110KB——节省的每一千字节都能改善页面加载时间，尤其是在移动网络上
- 调试第三方 CSS：美化压缩的 Bootstrap 或 Tailwind 输出，以了解正在应用的样式并查找冲突
- 代码审查：在提交 CSS 更改之前，美化并按字母顺序排序属性，以便 Git diff 仅显示有意义的更改，而不是格式差异
- 维护遗留代码：继承了一个 CSS 格式不一致的项目？使用一致的缩进美化所有文件以提高可读性
- 学习 CSS：学生可以粘贴复杂的 CSS 示例并美化它们以理解结构、特异性和级联规则
- CSS 变量管理：按字母顺序组织 :root 变量，以便在设计系统中更轻松地维护
限制和重要说明
- 不支持：
- CSS 预处理器（SCSS、SASS、LESS、Stylus）——请先编译
- CSS-in-JS 语法（styled-components、emotion）
- 扩展语法的 PostCSS 插件
- 性能：非常大的样式表（>5MB）可能导致浏览器减速——使用命令行工具如 csso 或 clean-css 进行批处理
- 需要审查的边缘情况:
- CSS hack（IE 特定过滤器）
- 内容属性中的故意空格
- 非常旧的专有属性可能导致警告
- 属性排序：纯粹按字母顺序——不针对 CSS 特异性或级联顺序优化
- 媒体查询排序：假定 min-width 断点；具有 max-width/方向的复杂查询可能无法按预期排序
- 重要：始终在生产中彻底测试压缩的 CSS——自动化无法捕获所有边缘情况