css变量必须在:root声明，否则组件内var()会fallback至currentcolor或inherit，导致闪色、调试困难及覆盖混乱；应使用--color-text-primary等语义化命名，禁用模糊前缀，并统一设置fallback值。
为什么--color-primary不能直接写在组件里
因为变量必须在 :root 中声明，否则组件内 var(--color-primary) 会 fallback 到 currentColor 或 inherit，页面加载时可能先闪默认色再变色。更严重的是，DevTools 里查不到最终值来源——它可能来自某个深埋的 .card { --color-primary: red; }，而这个重定义根本没被团队约定过。
常见错误现象：
- 修改
:root的--color-primary后，部分按钮没变色 → 实际是某组件内部偷偷覆盖了该变量 - CI 检查通过，但预发环境按钮边框突然变黑 → 团队某人提交了未评审的
--color-border覆盖规则
--color-primary 和 --ui-button-bg 哪个该用
用 --color-primary，不用 --ui-button-bg。前者是语义色（用途），后者是组件色（绑定实现），后者只应在极少数无法抽离状态的原子样式中出现。
原因很实际：
-
--color-primary可被button、heading、link共同引用，换主题时只改一处 -
--ui-button-bg一旦按钮结构变化（比如加 icon 容器），就得新增--ui-button-icon-bg，变量爆炸 - 设计系统文档只需维护
--color-primary的取值和用途说明，不用为每个组件写一套变量映射表
如何避免--primary-color这类名字撞车
禁用模糊前缀，强制使用功能域 + 语义层级命名：比如 --color-text-primary，而不是 --primary-color 或 --text-primary。
实操要点：
- 一级前缀必须是功能维度：
--color-、--space-、--radius-、--shadow- - 二级补全明确角色：
--color-text-primary表示“文本主色”，不是“主色文本”；--space-section-gap表示“章节间间距”，不是“间隙空间” - 组件级变量挂到组件根节点，且带
--ui-前缀隔离：--ui-button-padding-vertical，而非--button-padding - CI 阶段可用正则校验：
/^--(color|space|radius|shadow|zindex|font)-/，拒绝裸名或模糊名提交
BEM 类名和 CSS 变量怎么配合不打架
类名管归属与状态，变量管值。两者不嵌套、不混层、不互相推导。
正确做法：
- BEM 类名只表达意图：
.button--primary、.card--featured，不出现颜色或尺寸字眼 - 变量驱动样式：
.button--primary { background-color: var(--color-primary); } - 禁止变量名模仿 BEM 语法：
--button__icon--size是错的；应写--ui-button-icon-size - 修饰符（如
--disabled）仍由 class 控制，但它的 opacity 值来自var(--ui-button-opacity-disabled)，不是布尔变量
最易被忽略的一点：变量 fallback 必须统一设为浏览器安全值，比如 var(--color-text-primary, #333)，而不是留空——否则局部作用域缺失变量时，样式崩溃不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
