CSS变量名需遵循“作用域+类型+含义”三层语义结构，如--color-text-primary对应BEM的Block-Element-Modifier，确保可维护性、避免冲突并支持主题切换与IDE补全。
为什么 CSS 变量名不能只写 --primary 或 --red
因为这类命名缺乏上下文，一旦项目变大，--primary 到底是按钮主色、文本主色还是边框主色？没人能一眼判断；而 --red 更危险——它把设计决策（红色）硬编码进变量名，后续换成橙红或暗红就得全局搜替换，还容易和 --error-red、--accent-red 冲突。BEM 的核心是「语义分层」，CSS 变量也得遵循同一逻辑：变量名必须携带「作用域 + 类型 + 含义」三层信息。
--color-text-primary 这类命名是怎么拆解 BEM 思维的
它不是随便拼的，而是把 BEM 的三段式映射到了变量命名中：
-
color对应 Block —— 表示这是「颜色」这个功能模块下的变量 -
text对应 Element —— 表示它是颜色模块中专用于「文本」这一子用途的值 -
primary对应 Modifier —— 表示这是文本颜色中的「主要」状态，不是 secondary、hint 或 disabled
同理：--space-unit-sm（间距模块 → 单位子类 → 小尺寸变体）、--radius-card（圆角模块 → 卡片专用 → 无 modifier 表示默认值）。这种结构让 IDE 补全有效（输 --color- 就弹出所有颜色变量），DevTools 中过滤清晰（搜 text 能集中看到所有文本相关变量），主题切换时也只需覆盖 :root 下的对应变量组。
在组件级作用域中声明变量时，如何避免和全局变量冲突
直接在组件根节点（如 .card）上用 style="--color-bg: #f8f9fa;" 或 CSS 块内声明 .card { --color-bg: var(--color-surface-subtle); } 是安全的，但要注意三点：
- 组件变量必须带明确前缀，比如
--card-color-bg，而不是--bg或--color-bg（后者易与全局冲突） - 不要在组件内覆盖全局语义变量（如
--color-text-primary），那会破坏一致性；该覆盖的是更细粒度的变量，如--card-color-text - 若组件需响应主题，优先继承而非重定义：用
color: var(--color-text-primary);，而不是color: var(--card-color-text, var(--color-text-primary));—— 后者看似兜底，实则掩盖了语义断裂
和 BEM 类名共存时，变量与类名的职责边界在哪
最容易混淆的点是：什么时候该用 .button--primary，什么时候该用 --button-color-primary？答案很直白：
-
.button--primary表示「这是一个主按钮」——它承载语义、影响 JS 行为（比如点击后触发主流程）、可能关联 ARIA 属性 -
--button-color-primary只负责「主按钮该用什么颜色」——它不决定按钮是不是主按钮，只决定它长什么样 - Modifier 类名永远不消失，变量可以被覆盖；所以暗色模式下你改
:root里的--button-color-primary，但 HTML 里仍保留class="button button--primary"
真正复杂的是嵌套组件中的变量传递，比如 .card__header 需要读取 --card-color-header，但它又不是独立 Block；这时别硬造变量，而是让 .card 根节点声明所有子元素需要的变量，并靠 CSS 继承自然透传——这才是 BEM 式模块化的延伸，不是每个元素都配一个变量前缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
