CSS Beautifier & Minifier

CSS 美化与压缩工具是一个全面的 CSS 代码格式化和优化工具。无论您是在调试第三方 CSS、为生产环境优化样式表，还是维护大型代码库，干净且格式良好的 CSS 对于可读性和性能都至关重要。此工具可以立即将压缩的 CSS 美化为具有适当缩进的可读格式，或将开发 CSS 压缩以减小文件大小，加快页面加载速度。高级功能包括属性排序（按字母顺序组织以保持一致性）、颜色优化（缩短十六进制代码，如 #ffffff 变为 #fff）、媒体查询排序（按从小到大的断点组织）以及语法验证以捕获缺失的大括号或分号。所有处理都在浏览器客户端进行——不会将任何 CSS 上传到服务器，因此对生产样式表和客户项目是安全的。

<ol><li>将 CSS 粘贴或输入到输入面板中</li><li><strong>选择模式</strong>：选择<strong>美化</strong>以使用适当的缩进（2 个空格、4 个空格或制表符）格式化压缩或混乱的 CSS，或选择<strong>压缩</strong>以用于生产</li><li><strong>实时验证</strong>：工具突出显示语法错误（未闭合的大括号、缺失的分号、无效的属性）</li><li><strong>高级选项</strong>：<ul><li><strong>属性排序</strong>：在每个规则内按字母顺序组织 CSS 属性（提高 Git diff 可读性）</li><li><strong>颜色优化</strong>：缩短颜色代码（#ffffff → #fff，rgb(255,0,0) → #f00）</li><li><strong>媒体查询排序</strong>：从最小到最大断点重新排序 @media 查询</li><li><strong>压缩级别</strong>：正常（安全）或激进（最大压缩）</li><li><strong>保留注释</strong>：保留或删除代码注释</li></ul></li><li>适用于 CSS3、供应商前缀、CSS 变量、嵌套选择器和 @supports/@media 规则</li></ol>

<ul><li><strong>生产优化</strong>：将网站的 main.css 从 150KB 压缩到 110KB——节省的每一千字节都能改善页面加载时间，尤其是在移动网络上</li><li><strong>调试第三方 CSS</strong>：美化压缩的 Bootstrap 或 Tailwind 输出，以了解正在应用的样式并查找冲突</li><li><strong>代码审查</strong>：在提交 CSS 更改之前，美化并按字母顺序排序属性，以便 Git diff 仅显示有意义的更改，而不是格式差异</li><li><strong>维护遗留代码</strong>：继承了一个 CSS 格式不一致的项目？使用一致的缩进美化所有文件以提高可读性</li><li><strong>学习 CSS</strong>：学生可以粘贴复杂的 CSS 示例并美化它们以理解结构、特异性和级联规则</li><li><strong>CSS 变量管理</strong>：按字母顺序组织 :root 变量，以便在设计系统中更轻松地维护</li></ul>

<ul><li><strong>不支持</strong>：<ul><li>CSS 预处理器（SCSS、SASS、LESS、Stylus）——请先编译</li><li>CSS-in-JS 语法（styled-components、emotion）</li><li>扩展语法的 PostCSS 插件</li></ul></li><li><strong>性能</strong>：非常大的样式表（>5MB）可能导致浏览器减速——使用命令行工具如 csso 或 clean-css 进行批处理</li><li><strong>需要审查的边缘情况</strong>:<ul><li>CSS hack（IE 特定过滤器）</li><li>内容属性中的故意空格</li><li>非常旧的专有属性可能导致警告</li></ul></li><li><strong>属性排序</strong>：纯粹按字母顺序——不针对 CSS 特异性或级联顺序优化</li><li><strong>媒体查询排序</strong>：假定 min-width 断点；具有 max-width/方向的复杂查询可能无法按预期排序</li><li><strong>重要</strong>：始终在生产中彻底测试压缩的 CSS——自动化无法捕获所有边缘情况</li></ul>