bem与css变量需协同：bem定义结构语义，变量控制动态值；变量名须完整映射dom层级（含__element段），声明于:root或[data-theme]下，仅替代数值类modifier，状态类仍需类名控制。
因为BEM提供结构语义边界，CSS变量提供值的动态控制，二者分工明确——类名管“归属与状态”，变量管“数值与主题”，合起来才能既不崩结构、又不硬编码。
BEM变量名必须完整映射DOM层级，不能省略__element段
像--ui-button__text--primary-color这种写法不是为了炫技，而是把作用域锁死在button块的text元素和primary状态三层语义上。如果写成--ui-button--primary-color，button__icon和button__text就会共用同一变量，失去精细控制能力。
- 缺
__element段（如--ui-button--primary-color）→ 多个子元素共享变量，改一个值影响全局 - 缺命名空间前缀（如
--button__text--primary-color）→ 和--video__control--size等其他模块变量冲突时无法溯源 - 变量声明位置错误（如写在
.button--primary规则里）→ 无法被data-theme覆盖，暗色模式失效
CSS变量应替代仅影响样式值的Modifier类名，而非状态类
当一个Block有多个视觉可变维度（颜色、尺寸、圆角），硬写button--theme-primary--size-lg--variant-outline会导致类名爆炸。CSS变量能把“配置项”抽出来，让类名回归语义本质。
- ✅ 适合变量：
--button-color、--button-padding、--button-radius——它们只是数值映射，JS或构建时注入更可控 - ❌ 不适合变量：
--disabled、--loading、--active——这些是明确状态，必须靠类名开关，否则无法用:not(.button--disabled)等逻辑 - 混合场景下，
button--size-lg可退化为button+style="--button-size: lg"，但前提是所有尺寸都由同一套变量体系管理
变量必须声明在:root或[data-theme]下，不能直接写在组件规则里
BEM变量名只是“地址”，真正起作用的是它的CSS定义位置和层叠顺序。暗色模式切换靠的是重定义变量，而不是重写样式。
- 所有BEM变量必须声明在
:root或带[data-theme="dark"]属性的选择器下，例如：:root[data-theme="dark"] { --ui-toast__container--error-bg: #ff3b30; } - 组件内只用
background: var(--ui-toast__container--error-bg)，绝不硬编码#ff4d4f - 服务端渲染时，必须同步注入
data-theme属性和对应变量定义，否则首屏会闪回亮色 - 禁止在HTML中硬编码
style属性传变量值，统一由JS或构建时注入，保证可追溯性
clsx拼接BEM类名时，别混淆类名和CSS变量
clsx处理的是className，而CSS变量是style或:root里的字符串键。混淆两者会导致运行时读不到变量、构建时报Unknown variable，或热更新失效。
-
clsx("button", "button--primary")→ 正确：拼接类名 -
clsx("button", { "button--primary": isPrimary })→ 正确：控制Modifier类 -
clsx("button", `--button-color: ${color}`)→ 错误：把变量当类名拼，浏览器根本不会解析 - 要用变量，得走
style属性：style={{ "--button-color": color }}，或通过el.style.setProperty('--button-color', color)
最常被忽略的是：变量名再规范，如果没绑定到正确的声明作用域，就只是空字符串；类名再BEM，如果没配合变量的注入时机和范围，就只是静态壳子。二者必须在构建链路和运行时逻辑里对齐，才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
