HTML结构与CSS变量需同步设计，变量命名须匹配组件层级，宿主元素要显式绑定语义节点，避免全局滥用和同名异义，更新时优先使用触发合成层的属性以规避重排。
HTML结构和CSS变量不是“先写完再配”的关系，而是从第一行标签开始就要同步设计的协作系统。硬套变量名、忽略DOM层级或滥用:root声明，都会让组件在响应式切换、主题切换或状态叠加时失控。
HTML结构必须暴露可变语义节点
CSS变量要生效，得有明确的宿主元素。不能只靠:root定义一堆全局变量，然后在任意子元素里var(--color-primary)硬套——很多值根本无法继承，或者被父级color覆盖掉。
- 把需要动态控制的样式锚点，显式绑定到语义化容器上：比如
<article class="card" data-theme="dark">，而不是靠JS反复操作document.documentElement.style - 避免在
<span>或<div>上直接设style="--bg: #fff"，优先用类名触发变量注入：class="card card--inverted"+ 对应CSS规则 - 多主题场景下，用
data-属性配合[data-theme="light"] .card这类选择器，比纯JS切换bodyclass更可控、更易调试
CSS变量命名必须匹配结构层级
变量名不是越通用越好，而是要反映它在组件树中的作用域。叫--spacing-md不如叫--card-spacing-inner——后者能立刻告诉你这个值属于哪个组件、在哪一层生效。
- 顶层变量（如颜色、断点）放
:root；组件级变量（如卡片内边距、按钮圆角）定义在组件选择器内部：.card { --card-padding: 1rem; } - 避免在
:root里定义--card-bg这种带组件前缀的变量，它实际只被.card用，却污染全局作用域 - 父子组件通信靠变量传递：父组件设
--child-height，子组件用height: var(--child-height, auto)，留好fallback
变量更新必须避开重排（reflow）陷阱
直接改element.style.setProperty('--color', 'red')本身很快，但若这个变量参与了width、font-size或grid-template-columns计算，浏览器就得重新布局，性能会断崖下跌。
立即学习“前端免费学习笔记（深入）”；
- 优先用
transform、opacity、filter等触发合成层的属性绑定变量，例如：transition: transform 0.2s, opacity 0.2s+transform: translateX(var(--offset-x)) - 别用变量控制
display或visibility——它们不支持过渡，且display: none会彻底移除渲染流 - 动画中需频繁更新的变量，用
will-change: transform提前告知浏览器，但别滥用，否则反而增加内存开销
最常被忽略的是变量作用域和DOM结构的耦合度：一个var(--size)在.button里是字体大小，在.icon里却是宽高，这种同名异义会让调试变成猜谜。结构没定清楚，变量再“高级”也撑不起复杂组件。
