自定义属性未生效需检查是否误用unset作默认值；css变量不继承且无默认值，unset会触发属性特定重置行为；应使用合法字面量如#ffffff或1rem作默认值。
自定义属性没生效？先检查是否被重置为unset
CSS自定义属性（--my-color）不会自动继承，也不会像原生属性那样有默认值。一旦写成color: var(--my-color, unset)，而--my-color本身未定义，浏览器就真按unset处理——结果常是文字变透明、边框消失、布局塌陷。
- 常见错误现象：
var(--theme-bg, #fff)在旧版 Safari 或未声明--theme-bg的元素上显示为透明背景 - 根本原因：
unset对每个属性语义不同：对color是inherit，对display却是initial，极易误用 - 正确做法：默认值必须是该属性合法且有意义的字面量，比如
var(--theme-bg, #ffffff)或var(--gap, 1rem) - 不要用
var(--x, initial)或var(--x, inherit)作兜底——它们不是“没设置时的备用”，而是明确触发重置行为
IE不支持CSS变量？用@supports安全降级
IE11及更早版本完全忽略var()，但不会报错，而是静默回退到原生属性初始值（比如color变黑色）。靠@supports (color: var(--c))能精准识别支持状态，避免把降级样式全塞进不支持的环境里。
- 典型场景：深色模式切换依赖
--bg，但IE用户需要固定浅色背景 - 写法示例：
@supports not (color: var(--c)) { .card { background: #f8f9fa; } } - 注意：
@supports不能嵌套在@media内再检测变量，必须顶层独立判断 - 兼容性影响：PostCSS插件如
postcss-custom-properties会静态替换变量，但无法处理运行时计算（如calc(var(--x) * 2)），这类要手动补fallback
动态修改--primary后样式没更新？确认作用域和继承链
自定义属性只在声明它的选择器作用域内有效，且靠继承传播。给body设--primary: red，子元素用color: var(--primary)才能生效；但如果中间某层写了--primary: blue，下游就会拿到蓝色——不是覆盖，是遮蔽。
- 容易踩的坑：在
button上直接设--primary，却指望全局.icon跟着变，实际.icon根本没继承到这个变量 - 调试技巧：Chrome DevTools > Computed 面板里搜
--，看当前元素“Resolved value”是否显示预期值；若为空，说明上游没传下来或拼写错误 - 性能提示：频繁用JS改
document.documentElement.style.setProperty('--color', '...')是安全的，但避免在滚动/动画帧里高频调用，会触发布局重排 - 别用
!important修饰var()——语法非法，var(--x, red) !important整条声明会被浏览器丢弃
用var(--size)做font-size时单位丢失怎么办
自定义属性存储的是字符串，--size: 16和--size: 16px完全不同。前者在font-size: var(--size)中会被当作无单位数值，多数浏览器拒接渲染，回退到medium或继承值。
- 必须带单位：定义时写
--size: 16px，使用时font-size: var(--size)才可靠 - 想复用数值做计算？用
calc()包裹：padding: calc(var(--size) * 2)，前提是--size本身含单位（如1rem） - 错误示范：
--line-height: 1.5→line-height: var(--line-height)没问题，因为line-height本就接受无单位数值；但--width: 200→width: var(--width)就必然失败 - 工具建议：用
stylelint配stylelint-declaration-use-variable规则，强制关键尺寸类属性必须用var()，倒逼定义时带单位
最麻烦的不是语法写错，而是变量在某个嵌套层级被意外重定义，或者默认值选了unset这种“看起来像兜底、实则清零”的值。查问题时优先盯住那几行var(--xxx, ...)里的第二个参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
