用 margin、padding、border、background、font 简写属性可显著压缩 CSS 体积，但必须避免覆盖未显式声明的子属性初始值；其压缩原理在于减少重复关键词、分号及选择器匹配开销，并支持单位省略（如 0）、颜色缩写（如 #369）等规范优化。
直接说结论：用 margin、padding、border、background、font 这几类简写属性，能立竿见影地压缩 CSS 体积，但前提是别踩“覆盖默认值”这个坑。
为什么简写后体积变小？关键在语法压缩逻辑
CSS 简写不是“偷懒”，而是利用了浏览器解析时的语法合并规则。比如把四行独立声明压成一行，本质是减少重复关键词和分号，同时省掉选择器重复匹配开销。
-
margin-top、margin-right、margin-bottom、margin-left四个属性共占用约 60 字符（含空格和分号），而margin: 10px 20px 30px 40px仅约 35 字符 - 单位为
0时可省略单位（如margin: 0而非margin: 0px），这是 W3C 明确允许的，不兼容问题早已消失 - 颜色值如
#336699可缩为#369，但仅限三对相同数字；#333333→#333合法，#334455→#345不合法
简写时最容易覆盖原有样式的几个典型场景
简写属性会**重置未显式声明的子属性为初始值**，这是线上 bug 最常来源。
-
background-color: red;后紧跟background: url(logo.png) no-repeat;→background-color变成transparent，红色丢失 -
border: 1px solid #000;会把border-top、border-right等全部设为该值，若之前只设了border-bottom，其他边会从无到有被强制渲染 -
font: 14px/1.5 "Helvetica";会把font-style、font-weight全部设为normal，如果原样式用了font-weight: bold，就失效了
哪些简写必须严格按顺序？哪些可以乱序？
顺序是否重要，取决于子属性能否“歧义识别”。浏览器靠值类型推断归属，不是靠位置硬编码。
立即学习“前端免费学习笔记（深入）”；
-
background：顺序固定为color image repeat attachment position / size origin clip，因为url(...)和#fff类型不同，但no-repeat和top都是关键字，位置错乱可能误判 —— 所以老老实实按规范顺序写 -
border、margin、padding：只接受数值/长度/关键字，且每个位置对应唯一方向（TRBL），必须按top right bottom left顺时针写，记不住就默念TRouBLe -
font：font-size和line-height必须用/连接（如16px/1.4），且font-size必须在/前，否则解析失败
什么时候不该用简写？三个现实约束
简写不是万能膏药，有些场景硬套反而增加维护成本。
- 当只想改单边时（比如只调
padding-bottom），写padding: 10px 12px 20px 12px比直接写padding-bottom: 20px更易出错，也更难 review - 使用 CSS 自定义属性（
--spacing-xs）时，padding: var(--spacing-xs) var(--spacing-md)可读性优于padding: var(--spacing-xs) var(--spacing-md) var(--spacing-xs) var(--spacing-md)，但四值全写反而更清晰 - 动画中用
transition: all 0.3s配合简写，容易触发意外重绘（比如background简写带image时，哪怕只改color也会触发整块重绘）
真正省体积的关键不在“多用简写”，而在“删冗余 + 控制粒度 + 避免覆盖”。一个 margin 四值简写省不了多少字节，但一整页全是 * { margin: 0; padding: 0; } 这种通配符重置，再叠加上百行未删的旧注释，那才是体积爆炸的根源。
