BEM变量必须声明在Block根选择器下（如.button）而非:root，以保障作用域隔离、避免主题切换冲突、防止PurgeCSS误删、确保DevTools调试准确；修饰符和元素层仅读取或覆写，不定义新变量。
为什么不能在:root里定义所有BEM变量
因为组件级变量一旦全塞进:root，就失去作用域隔离能力。比如--button-padding和--card-padding如果都挂全局，换主题时改一个值，按钮和卡片的内边距会同步变化——这显然不是你想要的。
更实际的问题是：构建工具（如PurgeCSS）容易误删未显式使用的全局变量；DevTools里查getComputedStyle(el).getPropertyValue('--button-padding')时，返回值可能来自:root而非当前组件，调试链路断裂。
- 变量必须声明在组件根元素选择器下，例如
.button { --button-padding: 12px 24px; } - 禁止用
:root定义带具体块名的变量，如--button-color——它不是设计系统原子值，而是实现细节 - 若需跨组件复用（如所有可点击元素都要统一
--hover-scale），应抽到variables.scss中，用Sass变量生成，而非CSS自定义属性
如何在BEM Block上安全声明CSS变量
声明位置决定作用域，也决定是否能被后代元素继承。BEM的Block就是天然的作用域边界，但必须显式写出选择器，不能靠类名隐含。
错误写法：.btn--primary { --btn-bg: #007bff; }——修饰符不是Block，它不承载变量定义职责；正确写法是把变量挂在.btn上，再用修饰符控制其值：
立即学习“前端免费学习笔记（深入）”；
.btn { --btn-bg: var(--primary-color); --btn-border: var(--border-color); }.btn--outline { --btn-bg: transparent; --btn-border: var(--primary-color); }-
.btn__icon { color: var(--btn-icon-color, currentColor); }——元素层只读变量，不重定义
注意：--btn-icon-color这类变量必须在.btn或更高层定义，否则.btn__icon读不到。
变量名怎么带BEM语义又不冗长
变量名不是越短越好，也不是越全越好。关键是在“可定位”和“可维护”之间找平衡点。BEM三段式结构要体现在变量名里，但__和--不能乱套。
- 必须包含Block名前缀：
--button-，不能简写为--btn-（破坏命名一致性，IDE补全失效） - Element段不可省：
--button__text-color✅，--button-text-color❌——后者无法区分是按钮文字还是按钮内图标文字 - Modifier段只出现在需要差异化控制的变量上：
--button__text--hover-color，而不是每个变量都加--hover - 命名空间前缀必须存在：
--ui-button__text-color，避免和第三方库（如--video-player-bg）冲突
JS动态改BEM变量时最容易错哪几处
用el.style.setProperty()改变量看似简单，但拼错一个字符，DevTools里就显示Invalid property value，且无明确报错位置。
- 双下划线必须严格匹配：
--ui-button__text--hover-color，写成--ui-button_text--hover-color（单下划线）或--ui-button__text-hover-color（少一个-）都会失败 - 不要在JSX里用
clsx()拼变量名：style={{ color: clsx('--ui-button__text-color') }}——clsx返回的是类名字符串，不是CSS变量值 - 服务端渲染时，如果
data-theme属性没同步注入，或变量定义没随HTML一起下发，首屏会 fallback 到var(--ui-button__text-color, #333)里的默认值，造成闪动 - 用
getComputedStyle(el).getPropertyValue('--ui-button__text-color')验证时，确保el是Block根节点（如.button），不是.button__text——后者可能继承不到
最常被忽略的一点：变量值变更后，不会触发重排，但某些动画或伪类（如:hover）依赖的变量若未在对应状态选择器里重定义，视觉就不会更新。比如只改了.button上的--button-bg，却没在.button:hover里重新设setProperty，悬停时颜色就不会变。
