原生CSS变量命名必须严格遵循BEM语义，如--button-secondary-bg而非--primary；需在Block级显式声明变量，避免嵌套作用域误解；类名拼写、@layer顺序、变量前缀缺一不可，否则样式静默失效。
原生CSS变量命名必须与BEM语义对齐，不能只套颜色值
很多人把 --primary 当作万能变量，结果在 .button--secondary 里也用它，视觉上就乱了。BEM的修饰符（--secondary）本身已携带语义，对应的变量名就该体现这个语义，比如 --button-secondary-bg 或 --button-secondary-color，而不是复用 --primary。
常见错误现象：.button--secondary { background: var(--primary); } —— 这等于把“次要”按钮画成了“主要”色，违背BEM初衷；更糟的是，当主题切换时，--primary 变了，--secondary 的视觉意图却被动扭曲。
- 变量名应包含 Block + Modifier/Element 信息，如
--card-header-color、--input--disabled-border - 避免纯抽象变量（
--color-1、--bg-light），它们无法被BEM结构索引，调试时查不到归属 - 键值型修饰符（如
--size: large）可配合env()或@property做运行时映射，但需确保 CSS 变量本身有明确 BEM 上下文
CSS嵌套中使用 & 时，变量作用域不会自动继承BEM层级
原生嵌套语法（如 .button { &--primary { color: var(--button-primary-color); } }）看起来很顺，但 var(--button-primary-color) 不会因为写在 &--primary 里就“自动绑定”到 button 的上下文——它只是普通变量查找，仍按级联顺序向上找，和是否嵌套无关。
容易踩的坑：在 .modal { &__header { color: var(--color); } } 中设了 --color: blue，但实际生效的是全局 --color: red，因为变量未在 .modal 作用域内声明，浏览器根本不会“就近取值”。
立即学习“前端免费学习笔记（深入）”；
- 必须显式在 Block 级声明变量：
.modal { --modal-header-color: #222; &__header { color: var(--modal-header-color); } } - 不要依赖嵌套深度“隐式传递”变量，CSS 没有作用域闭包
- 若需统一管理，用
@layer utilities配合:where(.button) { --button-color: … }，但注意:where会重置优先级
BEM类名拼接失败时，CSS变量不会报错，但样式会静默失效
React 项目中用 classnames 拼 button__icon，但误写成 button__iconn，CSS Modules 生成的类名是 Button__icon___abc12，而你传入的是 Button__iconn___def34 —— 结果变量照常解析，只是那条规则压根没匹配到元素，color: var(--button-icon-color) 就永远不会执行。
这种失效完全无提示，DevTools 的 “Computed” 面板里连这条规则都看不到，只显示 fallback 值（比如 initial 或 inherited），排查成本极高。
- 所有 BEM 类名必须和 CSS 文件中定义的完全一致，大小写、连字符、双下划线一个都不能错
- 变量引用要和类名结构强绑定：
button__icon对应--button-icon-color，而非--icon-color - CI 中启用
stylelint-selector-bem-pattern并禁用--fix，防止自动替换掩盖拼写问题
用 @layer 组织BEM变量时，层序错位会导致变量覆盖不可控
假设你把基础色定义在 @layer base，组件变量放在 @layer components，但忘了给 base 加 !important 或更高特异性，那么 .button--large { --button-padding: 16px; } 就可能被更早加载的 @layer reset 里一条 * { --button-padding: 8px; } 覆盖掉——而你根本没意识到 reset 层的存在。
级联层不是命名空间，而是加载顺序+优先级控制机制。BEM变量一旦跨层，就脱离了 Block 的语义边界，变成全局博弈。
- 每个 Block 应独占一个
@layer，如@layer button、@layer card，禁止混用 - 变量声明尽量靠近使用位置，避免跨
@layer引用；真要复用，用@import显式导入变量模块 - 用
getComputedStyle(el).getPropertyValue('--button-color')查值时，返回的是最终计算结果，不反映来自哪一层——调试时得靠 DevTools 的 “Rules” 面板逐层翻
BEM 和 CSS 变量的结合点不在语法糖，而在命名契约的严格执行。变量名漏掉 Block 前缀、嵌套里忘声明、类名拼错一个字符、层序没对齐——这些地方都不会报错，但都会让样式在某个边缘场景下突然失灵，而且极难定位。
