CSS 压缩/美化工具

使用场景

前端开发者上线前必做的一件事就是压缩 CSS。写代码的时候为了可读性，你会加很多空格、换行和注释，这些对浏览器解析来说都是多余的。上线前把 CSS 压缩成一行，去掉了所有空格和注释，文件体积能缩小 20-40%。特别是移动端页面，CSS 文件每小 1KB 就快一点，对用户体验和 SEO 都有积极影响。

反过来，调试线上问题的时候你需要美化 CSS。线上跑的是压缩后的 CSS——所有代码挤在一行，根本没眼看。你想查某个样式为什么没生效，或者想看看某个类的具体定义，用这个工具把压缩后的代码展开（美化/格式化），还原成带缩进和多行的可读格式，排查起来就方便多了。

做代码审查和交接时也能用上。接手别人的项目，对方的 CSS 文件排版乱七八糟，缩进不一致、大括号位置不统一。先美化成标准格式，再读代码效率翻倍。或者你自己写了一半的 CSS，想整理一下，美化一下再继续写，看着也舒服。

常见问题

问：CSS 压缩后会有功能上的变化吗？ 答：不会。压缩只是去掉空格、换行、注释，以及缩短某些属性值（比如把 #FF0000 缩短成 red），不会改变 CSS 的功能。压缩后的 CSS 和压缩前的效果完全一样。

问：支持 CSS 的哪些版本？ 答：支持标准 CSS2 和 CSS3 语法，包括媒体查询、@keyframes 动画、自定义属性（CSS 变量）等现代特性。但不支持 CSS 预处理器语法（如 SCSS、Less、Stylus），如果你用的是预处理器，需要先编译成 CSS 再压缩。

问：美化后的缩进大小可以设置吗？ 答：可以，支持设置缩进为 2 个空格、4 个空格或者 Tab。你可以按照自己或团队的习惯来设定。

相关工具推荐

• SQL 格式化工具 - 格式化 SQL 查询语句
• JSON 格式化工具 - 美化和校验 JSON 数据
• SVG 编辑器 - 编写和编辑 SVG 矢量样式