CSS自定义属性默认可继承，继承的是变量定义而非计算结果；可通过重定义、unset或initial控制继承，变量名区分大小写，var()需设回退值防失效。
CSS自定义属性（--*）默认可继承，但继承的是变量定义本身，不是计算结果；想控制它，关键不在“能不能”，而在“在哪定义”和“怎么重写”。
自定义属性的继承是隐式发生的，不需要inherit关键字
普通CSS属性（如color）需要显式声明inherit才能强制继承，但--*变量不同：只要父元素定义了--main-color: red，子元素直接用var(--main-color)就能取到——前提是子元素没自己定义同名变量。
- 继承链从最近的、有该变量定义的祖先开始，不是从
:root兜底；:root只是常用起点，不是唯一源头 - 如果中间某层（比如
.card）重新定义了--gap: 8px，那它的所有后代都优先用这个值，而不是:root里的--gap: 16px - 变量名严格区分大小写：
--Color和--color互不影响
覆盖继承值的三种方式：重定义、unset、initial
子元素不想沿用父级变量？别用inherit（它对--*无效），而是明确干预：
- 重定义最常用：
.child { --text-color: #555; }—— 后续var(--text-color)就取这个新值 -
unset让变量“回归继承态”：如果该变量本就来自父级，--text-color: unset等价于删掉这行；但如果父级也没定义，它就变成未定义状态，var(--text-color, fallback)会回退 -
initial彻底清空：无论父级有没有定义，--text-color: initial会让它失去所有值，var()调用时只能靠回退值撑场子
var()里不写回退值时，未定义变量会导致样式失效
这是最容易踩的坑：如果color: var(--missing)，而--missing全程没被定义过，整条color声明会被浏览器忽略（不是变成黑色或透明，是直接丢弃）。
立即学习“前端免费学习笔记（深入）”；
- 务必在关键样式中加回退值：
background-color: var(--bg, #fff) - 回退值可以是任何合法CSS值，甚至另一个
var()：border-color: var(--border, var(--line, #ddd)) - 不要依赖“浏览器默认值”——
var(--size)不会自动 fallback 到font-size的初始值，它就是无效声明
组件隔离时，优先在组件根元素上定义变量，而非依赖全局继承
主题切换或深嵌套组件中，盲目依赖继承会让变量来源难以追踪。更可控的做法是：
- 每个独立组件（如
.modal、.tooltip）在自身选择器里定义所需变量：.modal { --modal-z-index: 1000; } - 避免在
:root塞一堆“可能用到”的变量，尤其当它们只服务于某个局部逻辑时 - 调试时打开开发者工具的“计算样式”面板，直接看
var(--x)展开后的实际值，比猜继承链快得多
真正难的不是让变量继承或不继承，而是让团队成员一眼看出某个--*到底从哪来、能不能改、改了影响多大——变量的作用域意识，比语法技巧更重要。
