压缩 and beautify CSS
压缩 CSS for production (strip whitespace, comments, merge rules) and beautify minified CSS for debugging.
- 1
Minified CSS reduces file 大小和 解析时间在 production. Beautified CSS 是 readable 为 development 和 debugging. 相同源 能够是 minified 为 deploy 和 beautified 为 inspection.
- 2 CSS 格式化器 →
Paste CSS. tool 能够 beautify (indent, one 规则 per 行) 或 minify (strip whitespace, comments, unnecessary semicolons) depending 开模式.
- 3 HTML 压缩器 →
如果你 是 minifying 整个 HTML document 具有 inline <风格> blocks, use HTML minifier 哪个 handles CSS 内风格 tags as 部分的 document.
- 4
Keep 源 maps 当 minifying 为 production — 它们映射 minified rules 回到 源为 debugging. Preserve 关键 CSS (above-the-fold) separately 从 deferred 完整 stylesheet.
常见问题
- 如何 much minification 保存?
- 典型 15-30% 的 file 大小为 well-written CSS, 更多为 verbose stylesheets 具有许多 comments. bigger win 是经常 gzip/brotli 压缩开 顶部的 minification — enable 两者在 服务器级别.
- 将 minification 改变 CSS 行为?
- 正确 minification preserves 所有 selectors, properties, 和 values — 仅 whitespace, comments, 和冗余 syntax (trailing semicolons, 零 units like 0px→0) 是 removed. 总是差异比较 beautified minified 输出针对原始到 confirm equivalence.