CSS压缩美化

CSS 压缩美化把一份样式表在「紧凑」和「易读」两种形态之间来回转换。压缩方向删掉 /* */ 注释、缩进、多余空格和换行，并把选择器、大括号、冒号、分号、逗号周围的空白收紧，最终压成一行，减小文件体积、便于上线。格式化方向相反，按大括号和分号重新断行、加缩进，把挤在一起的规则拆成一条一行，方便阅读和定位。日常写 CSS 会留大量缩进和注释，这些字符对浏览器渲染毫无意义却占体积；而线上或第三方给到的常是压成一坨的代码，想读懂、改一处又无从下手，这个工具解决的就是这两头的来回切换。

它的实现是纯文本的正则替换，不依赖完整的 CSS 语法解析。压缩时先用一条正则匹配掉 /* ... */ 注释块，再把连续空白折叠成单个空格，接着去掉大括号、冒号、分号、逗号以及 > ~ + 这些结构字符两侧的空白，最后删掉每个规则块里 } 前那个可省略的分号。格式化则是反向排版：在 { 后换行并加缩进、每个 ; 后换行、} 单独成行，并把逗号分隔的列表拆到多行。这种做法胜在快、零依赖、纯前端就能跑，代价是它不真正理解 CSS 的上下文，只按字符规则处理。

最典型的用法是发布前压缩。假设你手写的 style.css 有几百行、带成段注释和四格缩进，直接上线既费带宽又多一点解析开销，压一遍去掉这些冗余字节，再配合服务器的 gzip 体积更小。反过来是接手压缩代码：从浏览器开发者工具的 Sources 面板复制下一段压成一行的第三方样式，或拿到别人交付的已压缩 CSS，想定位某个选择器却挤成一坨，点格式化拆成正常排版，读、改、比对都顺手，改完再压回去。调试时只想快速看清一段陌生 CSS 的层级结构，也可以贴进来格式化后再看。

有几点要留意。它只做空白和注释层面的精简，不改任何属性值，所以不会把 #ffffff 缩成 #fff、不会合并重复规则或删无用样式——这些语义级优化是 cssnano、csso、PostCSS 这类构建期工具的活，压缩率更高但也更重，两者定位不同。注释在压缩和格式化两个方向都会被删掉，是有损的，若注释里有版权声明或标记性 hack，处理前请自行留档。还有，因为是正则实现、不做完整分词，遇到复杂取值要核对结果：calc() 里用加号且依赖两侧空格的表达式（如 calc(100% + 20px)）会被误删空格而失效，rgba()、font-family 这类带逗号的值在格式化时会被拆行，SCSS/LESS 的嵌套变量也需先编译成标准 CSS 再用，处理完复杂样式建议在浏览器里验证一下渲染效果。

CSS压缩美化是一个免费的在线工具，打开网页就能用，不用下载也不用注册。平时大家搜的“css压缩”、“css美化”、“css格式化”，说的都是这个。