首页首屏加载优化
电商大促前夜，运营发现首页 CSS 文件 82KB，移动端首屏渲染卡在 3 秒外。用本工具压缩后文件降至 34KB，同时合并了 5 个零散样式文件为 1 个请求。颜色值从 #ffffff 优化为 #fff、从 rgba(255,0,0,1) 简写为 red，减少 400 字节。最终首屏时间压到 1.8 秒，转化率回升 12%。
开发者工具 · JSON / 数据格式
CSS 压缩
缩短/合并/颜色优化
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
原始 0 KB
→
压缩 0 KB
省0%
输 入 CSS
压缩结果 min.css
压缩结果将在这里呈现 —— 点「示例」试试就绪 · 粘贴 CSS 实时压缩，csso 结构化优化（缩短色值 / 合并规则），全程本地处理
第一节
关于本工具
About手写 CSS 文件里，颜色值写成 #ff6600 和 #f60 并存，字号声明散落各处，上线前手动合并总漏几处。这个工具把多段 CSS 粘贴进去，自动压缩空白、合并重复选择器，并将十六进制颜色统一为最短形式（#ff6600 → #f60）。压缩全程在浏览器本地完成，代码不上传服务器——适合在 CI 流程外快速核对压缩结果，或给老旧样式做一次离线瘦身。
使用场景
组件库发包体积控制
前端团队维护的 UI 组件库，每次发版前需手动把 15 个组件样式文件压缩合并。某次漏压一个 6KB 的按钮样式，导致下游项目打包后多出 2KB 冗余。用本工具批量拖入所有 .css 文件，自动完成缩短属性名、合并相同选择器、删除注释，输出体积从 48KB 降到 21KB，且保证与原始渲染一致。
老旧项目样式瘦身
接手一个 3 年前的后台管理系统，CSS 文件累计 1.2MB，包含大量已废弃的按钮颜色和重复的 flex 定义。手动清理需逐行比对，风险极高。用本工具先跑一遍压缩，把 #333333 缩为 #333、margin: 10px 10px 10px 10px 缩为 margin:10px，文件降至 890KB；再配合差异对比，定位出 37 处未被引用的样式块，最终清理至 620KB，页面加载速度提升 40%。
邮件模板内联样式
营销邮件需把所有 CSS 内联到 HTML 中，但原始样式文件 18KB 含大量空格和长颜色值。用本工具压缩后仅 7KB，再通过内联工具嵌入，邮件源码从 35KB 降到 24KB。Outlook 和 Gmail 均正常渲染，且因体积减小，邮件进入收件箱的比例从 82% 提升到 91%。
第二节
使用指南
Getting Started使用步骤
- 1在输入框中粘贴 CSS 代码，编辑器自动统计原始字符数和行数
- 2勾选「合并重复选择器」和「优化颜色值」开关，默认启用两项
- 3点击「压缩」按钮，右侧结果区实时显示压缩后的代码、压缩比和节省字符数
- 4点击结果区右下角「复制」按钮，压缩后的代码存入剪贴板
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| body { color: #ff0000; background-color: #ff0000; } | body{color:red;background-color:red} | 常规：合并重复颜色值（#ff0000 → red），并去除多余空格和分号 |
| .box { margin: 10px 10px 10px 10px; } | .box{margin:10px} | 常规：简写相同边距值（四值合并为单值），验证属性简写规则 |
| /* 注释 */ .a { color: #fff; } /* 注释2 */ | .a{color:#fff} | 边界：完全移除所有 CSS 注释，包括多行注释 |
| a { color: #123456; } | a{color:#123456} | 边界：6 位十六进制颜色不缩短（非重复对），验证颜色优化仅针对可简写格式 |
| div { background: url('data:image/png;base64,iVBORw0KGgo=') } | div{background:url('data:image/png;base64,iVBORw0KGgo=')} | 易错：内联 base64 数据不应被压缩或修改，验证对 URL 值的正确处理 |
| @import url('style.css'); body { color: black; } | @import url('style.css');body{color:#000} | 易错：@import 规则保留且不合并，同时颜色名 black 转为 #000 |
| p { font-size: 0px; } | p{font-size:0} | 边界：移除数值后的单位 px（值为 0 时），验证单位优化规则 |
常见错误对照
1.颜色值缩写后语义丢失
✗ 错误
输入 #ff8833，期望压缩为 #f83✓ 修复
输入 #ff8833，压缩后为 #f83（仅当 R/G/B 每两位相同时可缩写）CSS 颜色缩写规则要求每两位十六进制值相同，否则缩写会改变颜色值。工具遵循 W3C 规范，不会对 #ff8834 做缩写。
2.合并选择器时忽略不同优先级
✗ 错误
.a .b { color: red } .a .c { color: red } → 合并为 .a .b, .a .c { color: red }✓ 修复
保持原样，不合并虽然声明相同，但两个选择器特异性（specificity）不同，合并后可能导致优先级计算错误。工具不会合并特异性不同的选择器。
3.零值单位未移除导致冗余
✗ 错误
margin: 0px; padding: 0em;✓ 修复
margin: 0; padding: 0;CSS 规范规定值为 0 时单位可省略。工具自动移除 0 后的单位（px/em/rem 等），减少字节数。
4.十六进制颜色未转为最短格式
✗ 错误
color: #aabbcc;✓ 修复
color: #abc;当十六进制颜色每两位相同时，可缩写为 3 位。工具自动转换，但需注意缩写后不影响颜色值。
5.属性简写未充分利用
✗ 错误
margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 10px;✓ 修复
margin: 10px;CSS 简写属性可合并多个方向值。工具会尝试将相同方向的属性合并为简写形式，减少代码量。
6.注释残留导致压缩不彻底
✗ 错误
/* 这是注释 */ .box { color: red; }✓ 修复
.box{color:red}CSS 注释在压缩时会被移除，但某些工具可能保留。本工具会删除所有注释，确保输出最小化。
7.引号未优化（多余或缺失）
✗ 错误
font-family: 'Arial'; content: "hello";✓ 修复
font-family: Arial; content: hello;CSS 中某些属性（如 font-family、content）的引号可省略。工具会移除不必要的引号，但保留必需的（如含空格的值）。
8.重复声明未去重导致冗余
✗ 错误
.box { color: red; color: red; }✓ 修复
.box { color: red; }同一选择器内相同属性重复声明，后一条会覆盖前一条。工具会移除重复声明，只保留最后一条。
第三节
工作原理
How It Works核心公式
压缩率 = (压缩后体积 ÷ 原始体积) × 100%
变量说明
压缩后体积CSS 压缩后的字节数原始体积CSS 压缩前的字节数
示例
原始 CSS 文件 12,800 字节，压缩后 8,960 字节：压缩率 = (8,960 ÷ 12,800) × 100% = 70%，体积减少 30%。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问这个压缩工具是纯前端跑的，我的 CSS 代码会不会被上传到服务器？＋
答
不会。这个工具是纯前端实现（FE），所有压缩、合并和颜色优化操作都在浏览器本地完成，代码不会离开你的电脑。你粘贴的 CSS 只存在于当前页面的内存中，关闭页面后自动清除，没有后端上传环节。适合处理含敏感样式或内部项目代码的场景。
问我有一段很长的 CSS，粘贴进去后页面卡住了，是不是有大小限制？＋
答
纯前端工具的性能取决于浏览器和机器内存。通常几十 KB 到几百 KB 的 CSS 即时处理无压力，但如果超过 1-2 MB（比如一个超大框架的未压缩样式），浏览器渲染线程可能会短暂冻结几秒。建议分段处理：先压缩单个模块（如 Bootstrap 的某个组件），再合并结果。如果文件实在过大，考虑用 Node.js 本地工具离线跑。
问压缩后样式变了，为什么我的网页布局乱了？＋
答
最常见原因是压缩时开启了颜色优化（如 #ff0000 转 #f00），但某些旧浏览器对简写十六进制的解析有细微差异；或者合并选择器时，原代码中某个选择器依赖特定层叠顺序。建议压缩后先勾选「保留颜色格式」选项，如果还出问题，对比压缩前后的 CSS 差异，检查是否有重复属性或合并导致的覆盖。本工具默认不改变选择器逻辑，只做空格和注释清理。
问这个工具能同时压缩多个 CSS 文件吗？＋
答
当前版本是单次粘贴一个代码块。如果需要合并多个文件，可以手动把内容拼在一起再粘贴，工具会对整体做去重和压缩。如果希望保持文件分离，建议先分别压缩每个文件，再手动拼接成一个大文件。未来版本可能会加「多文件上传」功能，但目前仅支持单段输入。
问颜色优化是把所有颜色都转成 hex 吗？我想保留 rgba 怎么办？＋
答
颜色优化默认会把 rgba/hsla 等现代颜色值转为最短的十六进制表示（如 rgba(255,0,0,1) 转 #f00）。如果代码中使用了带透明度的 rgba（如 rgba(255,0,0,0.5)），转成 hex 会丢失透明度信息，导致颜色不准确。这种情况请在压缩前取消勾选「颜色优化」选项，或者手动检查结果中带透明度的颜色是否被错误转换。
问为什么压缩后文件大小反而变大了？＋
答
通常不会，但有一种情况：当原始 CSS 已经极度精简（比如只有几行，且没有多余空格和注释），而工具在合并选择器时可能会添加少量分隔符或换行。另外，如果原始代码使用了大量重复的长属性值，压缩算法可能因为去重而增加映射表，导致体积微增。建议压缩后对比原始大小，如果增大超过 1%，可以尝试只勾选「去除注释」而不选其他优化项。
问这个工具和在线压缩网站（比如 CSS Minifier）有什么区别？＋
答
主要区别在隐私和速度。本工具纯前端运行，不经过服务器，你的代码不会暴露给第三方；而多数在线网站会把 CSS 发送到后端处理。另外，本工具额外支持颜色优化（自动缩短颜色值）和合并同类选择器，而传统压缩只做空格和注释清理。如果你不需要颜色优化，两者压缩率基本一致。
问我粘贴了一段带 @import 的 CSS，压缩后 @import 被删掉了？＋
答
压缩工具默认不会删除 @import 语句，但如果你勾选了「合并导入」选项，工具会尝试内联 @import 引用的样式（仅限本段内定义的）。如果 @import 指向外部 URL，工具无法获取该文件内容，所以会保留原语句。检查是否误勾选了「移除所有 @import」选项，如果没有，可能是压缩后代码显示不全，建议展开结果区查看完整输出。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。