css变量能解耦样式逻辑与组件结构，实现主题切换、动态样式和跨组件协同；z-index需用--z-modal等变量而非写死数值，避免魔法数字导致的维护混乱和冲突。
因为它们能解耦样式逻辑与组件结构，让主题切换、动态样式和跨组件协同真正可维护——不是靠人脑记数字或硬编码值，而是用浏览器原生支持的变量系统驱动。
z-index 冲突时为什么必须用 --z-modal 而不是写死 1000
写死数值会让所有组件共享同一套“魔法数字”，一旦新增一个弹窗层或滚动吸顶条，就得全局搜 z-index: 1000 改，极易漏改或覆盖。用 CSS 自定义属性后：
-
::root里统一定义标尺：--z-modal: 1000、--z-dropdown: 900、--z-toast: 850 - 每个组件只写
z-index: var(--z-modal)，不关心具体值 - 构建时可通过 PostCSS 插件校验层级顺序，防止
--z-toast > --z-modal这类逻辑错误 - Vue 的
<style scoped></style>和 React 的 CSS Modules 都能直接读取var()，无需额外 polyfill
React 中用 styled-components 时，var(--primary-color) 和 ${props => props.theme.primary} 哪个更稳
优先用 var(--primary-color)。原因很实际：
-
styled-components的props.theme是 JS 对象，得靠组件逐层透传；而 CSS 变量是浏览器原生继承机制，父组件设了.dark-theme { --primary-color: #e00 }，子组件直接color: var(--primary-color)就生效，不用写themeprop - 主题切换时，JS 方案要触发重渲染，CSS 变量只需切换 class 或修改
:root，无 JS 开销 - 如果同时用
styled-components和第三方库（如 Element Plus），后者只认 CSS 变量，不认 JS theme 对象 - 注意：
var(--x)不支持在styled模板字符串里做计算，比如background: var(--primary-color) + '20%'会报错，得用calc()或 JS 处理
Vue 的 <style scoped></style> 里能直接用 var(--x) 吗？有什么限制
能，但要注意作用域链是否断开：
-
<style scoped></style>不影响 CSS 变量的作用域，var(--x)仍按标准继承规则查找（先找最近父级定义，再往上到:root） - 如果组件根元素没加 class，又没显式设置
class="theme-light"，那var(--x)就只能 fallback 到:root定义的默认值 -
scoped样式里的选择器会被自动加属性选择器（如.foo[data-v-abc123]），但变量引用不受影响，color: var(--text-color)照常工作 - 别在
scoped样式里用@keyframes引用变量——动画帧内不支持var()，得提前提前算好值或用 JS 注入
最易被忽略的一点：CSS 变量的值是字符串，var(--gap) 即使设的是 16px，也不能直接参与 calc(100% - var(--gap)) 以外的运算；想做颜色明暗变化，得用 color-mix() 或 HSL 函数配合变量，而不是指望 var(--primary) * 0.8。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
