全局css变量必须声明在:root下，命名需带语义化前缀（如--color-primary、--space-md），var()调用必须设默认值，局部覆盖应使用:where()配合默认值，避免污染全局作用域。
必须用 :root 声明全局变量，别在组件里瞎定义
所有真正需要跨组件复用的变量（颜色、间距、字体大小等），只能挂 :root。这不是风格偏好，而是浏览器级限制：只有 :root 是唯一能覆盖整个文档树的锚点，确保伪元素、SSR 渲染、JS 动态读取（getComputedStyle）全部可靠。在 .card 或 .header 里定义 --padding 看似“局部”，实则污染全局作用域，且无法被 document.documentElement.style.setProperty() 统一控制。
变量名必须带语义化前缀，禁止裸名如 --primary
裸名 --primary 或 --sm 在团队协作中等于埋雷——没人知道它属于颜色、尺寸还是圆角，更不知道谁在哪个文件里重定义过。正确做法是强制分层前缀：
-
--color-primary、--color-surface（只管颜色意图） -
--space-unit、--space-md（不写死像素值，靠calc(var(--space-unit) * 2)推导） -
--radius-lg、--border-width-base（命名即用途，不绑定具体数值）
这样 IDE 能自动补全 var(--color-*，搜索时也能精准过滤，换主题时只需批量改 :root 里的一组 --theme-* 变量。
var() 调用不设默认值，等于主动放弃降级能力
color: var(--text-primary) 看起来干净，但一旦变量未定义（比如 JS 主题切换脚本加载失败、CSS 文件异步加载顺序错乱），该属性直接退化为 unset，文字可能变透明或布局塌陷。必须写成：
color: var(--text-primary, #333)-
padding: calc(var(--space-md, 12px) * 2)—— 注意：计算表达式里的var()也得带默认值，否则整个calc失效 - 默认值只能是合法 CSS 值，不能嵌套另一个
var()
模块级覆盖用 :where() + 默认值，别碰 style 属性
某个卡片想临时加大内边距，又不想影响全局 --space-md？不要用 JS 直接写 element.style.setProperty('--space-md', '24px')，这会污染全局变量，后续其他组件读到的就是错的值。正确方式是：
- 在卡片根元素加 class
.card - 写样式：
:where(.card) { --card-padding: 24px; } - 组件内使用：
padding: var(--card-padding, 16px)
:where() 不增加优先级，不会意外压过其他规则；var(--card-padding, 16px) 保证即使没设 --card-padding，也能安全回退。这才是可控的局部覆盖。
复杂点在于变量和 JS 的联动时机——getComputedStyle(document.documentElement).getPropertyValue('--color-primary') 读不到未生效的动态设置，必须等样式表解析完成。这点容易被忽略，尤其在 SSR hydration 后立即读值的场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
