裸名--color或--sm在项目里等于埋雷，因为css变量是全局作用域、无模块隔离，不同团队或库定义同名变量会导致覆盖难定位；必须加命名空间前缀（如--ui-）、采用“维度+语义”结构（如--ui-color-text-primary），禁用模糊名和bem符号化写法，变量只管值不管状态，且须设fallback并统一注入。
为什么裸名--color或--sm在项目里等于埋雷
因为CSS变量是全局作用域，没有模块隔离机制。不同团队成员、第三方UI库、甚至你自己的组件库都可能定义同名变量，一旦冲突，DevTools里查不到来源，构建后也难定位。比如--primary在Button组件和Card组件里分别被设为蓝色和灰色，最终生效的是最后加载的那份，毫无预期性。
实操建议：
- 所有变量必须带命名空间前缀，如
--ui-、--app-、--theme- - 禁用功能模糊的二级名，比如
--main-color；改用--color-text-primary这种“维度+语义”结构 - 颜色类变量统一以
color作二级关键词，便于IDE补全识别（--ui-color-brand-primary比--ui-brand-primary-color更易被自动提示）
--ui-button-size-large vs --ui-button--large：BEM语法不能直接套用到CSS变量
CSS变量不继承BEM的__和--层级语法。强行套用会让VS Code搜索变慢、补全失效，新人也看不懂。比如--ui-button__text--large-size这种写法既不符合CSS变量命名惯例，又破坏了可读性。
正确做法是把BEM类名语义映射为变量名，但去掉结构符号：
-
.button--large→--ui-button-size-large -
.button__icon→--ui-button-icon-size -
.button--disabled→ 不定义--is-disabled布尔变量，而是用--ui-button-opacity-disabled管值
变量该不该管状态？--is-hovered为什么是反模式
CSS变量适合管“值”，不适合管“状态”。用JS动态设置el.style.setProperty('--is-hovered', 'true')再在CSS里匹配，会导致调试困难、PurgeCSS无法识别、媒体查询失效等问题。
更可靠的做法是让class控制状态，变量只负责注入值：
- 保留
.button--hovered类名，它内部使用变量：.button--hovered { background-color: var(--ui-button-bg-hover); } - 避免用
data-属性驱动变量，比如[data-state="loading"] { --ui-button-bg: var(--color-surface-disabled); }——这绕过了class系统，破坏BEM“类名即契约”的原则 - 所有状态相关样式仍走class路径，变量只做值容器
变量注入时机决定维护成本
如果靠人工维护多套CSS文件（比如light.css和dark.css各写一遍变量），很快就会出现不一致。变量必须由构建时注入（如PostCSS插件）或JS初始化阶段统一注入，不能靠人肉同步。
关键点：
- 所有变量必须设fallback，例如
var(--ui-color-text-primary, #333) - 全局变量统一注入
:root，组件级变量挂载到组件根元素上（如.ui-button { --ui-button-padding: 12px; }） - 禁止在多个地方重复定义同一变量，尤其避免在
:root和局部选择器里同时设--color-primary
最易被忽略的是变量作用域与组件边界的对齐——一个变量是否该出现在:root，取决于它是否真被跨模块复用；否则就该收敛到组件内部，否则迟早撞名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
