BEM变量名必须完整映射DOM结构层级：block→element→modifier三层语义，加命名空间前缀（如--ui-），声明在:root或[data-theme]下，禁用PurgeCSS误删，确保结构标识与值容器双重角色可控。
为什么--ui-button__text--primary-color比--button-primary-color更可控
因为前者把变量作用域锁死在button块的text元素和primary状态三层语义上，避免跨组件误用。后者看似简洁，但一旦input或link也想复用这个颜色，就得拷贝值或加覆盖规则，破坏设计系统一致性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 变量名必须完整映射 DOM 结构层级：block → element → modifier，缺一不可
- 禁止省略
__element段写成--ui-button--primary-color——这会让button__icon和button__text共用同一变量，失去精细控制能力 - 命名空间前缀（如
--ui-）不能省，否则和全局--be-或--video-变量冲突时无从排查
如何让--ui-toast__container--error-bg支持暗色模式切换
关键不在变量名本身，而在它是否被定义在可被覆盖的作用域里。BEM变量名只是“地址”，真正起作用的是它的 CSS 定义位置和层叠顺序。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有 BEM 变量必须声明在
:root或带[data-theme="dark"]属性的选择器下，不能直接写在.toast--error规则里 - 暗色模式应重定义变量，而非重写样式：
:root[data-theme="dark"] { --ui-toast__container--error-bg: #ff3b30; } - 组件内只用
background: var(--ui-toast__container--error-bg)，绝不硬编码#ff4d4f - 服务端渲染时，必须同步注入
data-theme属性和对应变量定义，否则首屏会闪回亮色
clsx拼接 BEM 变量名时为什么容易出错
因为clsx处理的是类名（className），而 CSS 变量是style或:root里的字符串键。混淆两者会导致运行时读不到变量、构建时报Unknown variable，或热更新失效。
常见错误现象：
- 在 JSX 里写
style={{ backgroundColor: clsx('--ui-card__body--hover-bg') }}——clsx返回的是字符串，不是变量值 - 用
useEffect动态改document.documentElement.style.setProperty，但变量名拼错双下划线，比如--ui-card_body--hover-bg - 在 Sass 中用
@include set-var(--ui-card__body-bg, $color-bg)，结果编译后变量名被转义或截断
正确做法是：变量名用模板字符串静态拼，值由 JS 或 CSS 控制：
const bgVar = `--ui-card__body${isHovered ? '--hover-bg' : '-bg'}`;
为什么--ui-开头的变量在 PostCSS 构建中常报undefined
这不是变量没定义，而是构建流程中 CSS 变量解析与 BEM 命名校验工具（如stylelint-selector-bem-pattern）不协同。PostCSS 默认只校验类名格式，不检查var(--xxx)里的xxx是否符合 BEM 规则。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用对
var()参数的 BEM 校验，或配置stylelint跳过custom-property节点 - 所有 BEM 变量必须在独立文件（如
variables.scss）中集中定义，禁止在组件 SCSS 里零散:root声明 - 用 VS Code 插件
CSS Peek按住 Ctrl 点击var(--ui-button__text--primary-color)，验证能否跳转到定义处；跳不到说明路径或拼写有误 - 构建产物中搜索
--ui-button__text--primary-color，确认它确实出现在最终 CSS 文件里，而非被 PurgeCSS 误删
--xxx既被 A 组件强依赖，又被 B 组件悄悄覆盖。 
