支持简写的主流属性有margin、padding、border、background、font、transition；display、position、z-index等单值属性无简写形式；简写会隐式重置未声明的子属性，局部调整或协作场景宜用全写。
哪些 CSS 属性支持简写，哪些不能硬凑
不是所有属性都能简写，强行合并反而让代码更难维护。margin、padding、border、background、font、transition 这几类是主流支持简写的，但像 display、position、z-index 这类单值控制型属性，压根没有简写形式——别搜“display 简写”了，不存在。
-
background简写会重置所有子属性（比如漏写background-color，它就变透明，可能盖不住下层内容） -
font必须按固定顺序：font-style font-variant font-weight font-size/line-height font-family，错一个位置，整个声明会被浏览器忽略 -
border简写（如border: 1px solid #000）会同时覆盖border-top、border-right等，想单独调某一边？得回退用全写
简写后哪些值会被隐式重置
这是最常踩的坑：简写不是“追加”，而是“整套替换”。比如你原本写了 background-color: #fff，再加一句 background: url(img.png)，结果 background-color 就没了，变成 transparent。
-
background简写不带颜色 →background-color变transparent -
font简写不写font-weight→ 默认为normal，哪怕之前设过bold -
transition简写只写transition: opacity 0.3s→ 其他可过渡属性（如transform）的过渡效果全部失效
什么时候该坚持用全写
当需要局部调整、多人协作、或未来大概率要拆开维护时，全写比简写更安全。
- 组件级 CSS（如 Button、Card）里，
padding常要微调上下左右，用padding-top比padding: 8px 12px 6px 12px更直观 - 响应式场景中，
@media里只改一个方向的margin，全写避免重复声明整套值 - 用 CSS 自定义属性时，
--spacing-xs: 4px配合margin-left: var(--spacing-xs)比塞进四值简写里更易追踪
工具链对简写的实际影响
PostCSS 插件（如 postcss-merge-longhand）会自动把全写转简写，但它们识别逻辑有限——遇到自定义属性、CSS-in-JS 字符串拼接、或注释分隔的写法，容易漏判或误判。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 默认不处理 CSS 简写，靠插件；没配插件时，你写的简写就是最终输出
- VS Code 的 CSS 提示对简写支持不一：
background能提示完整语法，但transition的多段写法（transition: width 0.2s, opacity 0.3s）常被标黄，其实合法 - 压缩工具（如 cssnano）默认启用简写合并，但若你已在源码里混用简写/全写，压缩后可能意外覆盖某些值
