CSS 压缩与格式化工具 - 在线压缩与美化 CSS
在线压缩 CSS 减小文件体积，或格式化 CSS 提升可读性，浏览器本地处理，即时出结果，无需上传。
把 CSS 粘进来，这个 CSS 压缩工具会立刻帮你压缩——去掉注释、空格、换行和多余字符，把样式文件体积压下来，让页面加载更快。需要看代码时切到「格式化」，又能把压缩成一行的 CSS 重新缩进展开，方便调试和修改。全程在浏览器本地完成，你的样式表不会上传到任何服务器，公司项目里的私有样式也不用担心外泄。
为什么要使用在线 CSS 压缩与格式化工具？
你可以用 CSS 压缩工具减小样式文件体积，也可以用 CSS 格式化工具整理代码结构，更适合调试、重构和代码审查。
把 CSS 粘进来，这个 CSS 压缩工具会立刻帮你压缩——去掉注释、空格、换行和多余字符，把样式文件体积压下来，让页面加载更快。需要看代码时切到「格式化」，又能把压缩成一行的 CSS 重新缩进展开，方便调试和修改。全程在浏览器本地完成，你的样式表不会上传到任何服务器，公司项目里的私有样式也不用担心外泄。
CSS 压缩与格式化工具怎么用
- 1
粘贴 CSS 代码
把要处理的样式代码粘到输入框里，单条规则或整份样式表都行。
- 2
选择压缩或格式化
点「压缩」把 CSS 压成紧凑的一行，体积更小；点「格式化」把压缩过的 CSS 重新缩进展开，恢复成可读的代码。
- 3
检查处理结果
看一眼输出内容；如果 CSS 有语法错误会被标出来，你可以先改好再复制。
- 4
复制结果
点「复制」拿走压缩或格式化后的 CSS 用到项目里，点「清空」可以重新开始。
参考资料
- MDN — CSS
Mozilla 的 CSS 文档，涵盖语法、属性和取值，压缩或格式化之后想核对规则写法时很好用。
- W3C — CSS Snapshot
W3C 官方的 CSS 规范总览，定义了合法的样式表语法标准。
相关工具
常见问题
- CSS 压缩工具是做什么的？
- CSS 压缩工具会把浏览器渲染样式时用不到的东西全部去掉——注释、换行、多余空格、冗余字符，压成一个更小的文件，下载更快、加载更省时间，而样式的实际效果一点不变。
- css格式化和css压缩有什么区别？
- 压缩是把 CSS 压成一行、去掉所有空白，让文件尽量小，适合上线用；格式化正相反，会加上换行和缩进、把代码排得整整齐齐，方便人阅读和修改。同一个工具切换两个模式就能互相转换。
- 怎么把压缩成一行的 CSS 还原成正常排版？
- 把压缩后的 CSS 粘到输入框，点「格式化」就行。css格式化工具会重新缩进、补上换行，把挤成一行的代码展开成清晰可读的样子，方便你修改、调试和做代码审查。
- 压缩 CSS 会影响页面的显示效果吗？
- 不会。压缩只删掉浏览器本来就忽略的字符，比如注释和空格，选择器、属性、取值完全不动，所以渲染出来的样式跟原来一模一样，只是文件更小了。
- 我的 CSS 会被上传到服务器吗？
- 不会。所有压缩和格式化都在你的浏览器本地完成，样式表不会离开你的设备，公司或客户项目里的私有 CSS 也能放心处理。
- 压缩后 CSS 文件能小多少？
- 这取决于原文件里有多少空格和注释。注释多、排版宽松的样式表通常能减小 20%–50%，而上线后服务器再开启 gzip 或 Brotli 压缩，体积还能进一步缩小。