🎨 CSS格式化/压缩

CSS格式化/压缩到底做了什么

CSS代码由「选择器 + 声明块」组成，声明块里的每条属性用分号分隔。格式化就是把这些挤在一起的内容按缩进和换行排整齐；压缩则是反向操作。

格式化 vs 压缩 行为对比

操作	缩进	换行	注释	空格	结尾分号
格式化	补全	每条规则分行	保留	规范	保留
压缩	去除	并为一行	移除	去除	去除

为什么压缩能减小体积

• 去除注释：/* ... */ 全部删除。
• 去除换行和首尾空格：多行变成一行。
• 去除属性间多余空格：color: red 变 color:red。
• 去除最后一个分号：…;} 变 …}。
• 结合gzip：浏览器传输时再压缩60%以上。

一个20KB的CSS，压缩后可能只有10KB，再gzip后网络传输约3KB，加载速度提升明显。

CSS性能优化进阶建议

• 压缩是基础，更重要的是「删除未使用的CSS」。
• 合并重复的选择器和属性，减少冗余。
• 用CSS预处理器(Sass/Less)的minify功能构建时压缩。
• 关键CSS内联，非关键CSS异步加载。
• 配合CDN和缓存头，让浏览器少下载重复资源。

压缩时如何保证安全

CSS压缩相比JS简单和安全得多，因为CSS没有复杂的语法结构。但字符串值（如content属性、URL、字体名）里的空格和标点不能动。

• content:"..." 引号内的内容原样保留。
• url("...") 里的路径不能改动。
• 计算属性 calc(100% - 20px) 里的空格有含义，不能乱删。
• 自定义属性 --var 的值需保留。