要，而且必须显式带上块名前缀；BEM不是自动作用域隔离机制，--color-primary等裸名变量必然冲突，--card-color-primary才符合BEM语义，变量须声明在对应块选择器内，避免提级至:root。
CSS变量名要不要带BEM前缀？
要，而且必须显式带上块名前缀。BEM是命名约定，不是自动作用域隔离机制；--color-primary这种全局变量名在多组件项目里必然冲突，--card-color-primary才是符合BEM语义的写法。
常见错误是把变量当“主题色”统一管理，结果一个--text-color被.header、.card、.form同时读取——这等于用变量绕过了BEM的模块边界，一旦某个块需要独立配色，就得加!important或重写选择器。
- 块级变量：以块名为根，如
--card-padding、--card-border-radius - 元素级变量：可选，仅当该元素样式高度定制且复用性低时才定义，如
--card__title-font-size - 修饰符级变量：不单独定义，直接在修饰符规则中覆盖块/元素变量，如
.card--compact { --card-padding: 8px; }
SCSS中如何安全生成BEM变量？
不能靠&拼接生成变量名，因为&会带空格和嵌套上下文，&--compact在.card:hover里会变成.card:hover--compact，非法。
正确做法是把块名存为变量，再插值构造CSS自定义属性：
立即学习“前端免费学习笔记（深入）”；
$block: "card";
.card {
--#{$block}-padding: 16px;
--#{$block}-border-radius: 4px;
&__title {
font-size: var(--#{$block}-font-size, 1.25rem);
}
&--compact {
--#{$block}-padding: 8px;
}
}
注意：var(--#{$block}-font-size, 1.25rem)里的默认值必须写死，不能引用另一个变量（如var(--#{$block}-padding)），否则编译期无法解析。
变量和修饰符怎么联动才不出错？
修饰符只改变量值，不新建变量。一个.card--dark应该覆盖--card-bg-color，而不是定义--card--dark-bg-color。
- 禁止在修饰符块内声明新变量，只用
var(--xxx)读取，用--xxx: xxx覆盖 - 避免跨块引用：
.card不能读--button-color，哪怕逻辑上“按钮颜色要和卡片一致”——这是耦合，应由设计系统统一提供--sys-color-primary，再由各块映射 - JS切换修饰符时，必须同步更新对应CSS变量：给
element.classList.add("card--dark")后，手动element.style.setProperty("--card-bg-color", "#1a1a1a")，否则变量值不会自动响应
BEM变量在构建链路里怎么校验？
变量名本身不会被stylelint-selector-bem-pattern检查，但可通过postcss-custom-properties配合自定义规则拦截无前缀变量。
关键检查点：
- grep所有
var(--[a-z]，排除var(--sys-等设计系统变量，剩下未带块前缀的全标为风险 - 构建时报warning而非error，因为部分第三方库（如某些图表组件）会注入无前缀变量，需人工白名单
- VS Code中启用
editor.quickSuggestions对CSS变量补全，输入--card时只提示--card-padding类，不提示--color——这是编辑器级防护
最易被忽略的是：变量作用域不等于选择器作用域。即使.card__title只在.card内部出现，--card__title-color仍可能被外部:root覆盖，所以变量声明必须紧贴使用它的块选择器，不能提级到:root。
