🎨 CSS 压缩器

什么是CSS压缩工具？

CSS压缩工具（CSS Minifier）是一种将CSS样式表中的冗余字符（空格、换行、注释等）去除，从而减小文件体积的在线工具。在生产环境中，CSS文件体积直接影响页面加载速度——每减少1KB的CSS，页面渲染时间就可能减少数毫秒。CSS压缩通过移除人类可读但机器不需要的格式化字符，可以将文件体积减小40%-60%。配合Gzip/Brotli服务器压缩后，传输体积还能进一步减少。本工具在移除冗余字符的同时保证CSS语义不变，支持CSS3所有语法特性，包括自定义属性、嵌套规则、calc()表达式等。

如何使用CSS压缩工具

1. 粘贴CSS代码 — 将需要压缩的CSS代码粘贴到输入框中，支持完整的样式表或部分代码片段。
2. 配置压缩选项 — 可选择是否移除注释、是否合并重复选择器、是否缩短颜色值等。
3. 获取压缩结果 — 点击压缩按钮，查看压缩后的代码和体积对比（原始大小 vs 压缩后大小）。

常见使用场景

技术原理

CSS压缩的核心是安全的字符替换和移除策略：

// CSS压缩处理的步骤
// 1. 移除所有注释 /* ... */
// 2. 移除多余空白（多个空格合并为一个）
// 3. 移除选择器和属性值前后的空格
// 4. 移除最后一个分号（如 } 前的 ;）
// 5. 缩短颜色值（#FFFFFF → #FFF）
// 6. 缩短时间值（0.5s → .5s）
// 7. 合并重复规则（高级压缩）

// 压缩前：120 bytes
// .header {
//     background-color: #FFFFFF;
//     margin: 0px;
// }

// 压缩后：42 bytes  
// .header{background-color:#fff;margin:0}

最佳实践与注意事项

• 仅在部署到生产环境时使用压缩版本，开发过程中使用格式化的CSS便于维护和调试。
• 注意CSS hack注释（如/*! */）可能需要保留——部分工具支持保留带感叹号的注释。
• 压缩后应进行功能测试，确保移除空白和注释没有破坏特殊语法（如calc中的空格）。
• 建议使用构建工具（如PostCSS cssnano）自动化压缩流程，集成到CI/CD流水线。

常见问题