原生CSS变量与BEM必须职责分离：变量管值、BEM管结构；变量名须含BEM语义层级如--color-button-primary；BEM类名仅用var()引用变量，不硬编码值；主题切换通过HTML data-brand控制变量作用域，禁止在组件内覆盖变量。
原生CSS变量和BEM不是“能结合”，而是必须分清职责——变量管「值」，BEM管「结构」，混用或互相替代就会在主题切换、组件复用、SSR首屏时出问题。
变量名必须带BEM语义层级，不能只写--primary
写--primary等于没命名：它可能是按钮背景、文本色、边框色，谁改谁负责？没人知道。BEM的三层逻辑（Block-Element-Modifier）要映射到变量名里：
-
--color-button-primary：Block=color，Element=button，Modifier=primary -
--space-card-padding：Block=space，Element=card，Modifier=padding（这里padding是用途，不是状态） -
--radius-input-border：Block=radius，Element=input，Modifier=border
这种命名让IDE补全有效、DevTools过滤精准、主题覆盖可预测。别用--btn-primary缩写——btn不是语义块，是缩写，团队新人看不懂，PurgeCSS可能误删。
BEM类名不直接写颜色值，只用var(--color-button-primary)
这是最容易被跳过的执行点。常见错误是在.button--primary里硬写background-color: #4f46e5，结果换肤时得搜遍所有CSS文件改颜色。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 所有BEM类名只声明
background-color: var(--color-button-primary); - 变量定义统一收口在
:root或html[data-theme="dark"]下 - 必须带fallback：
background-color: var(--color-button-primary, #007bff);，防JS未执行或SSR白屏
注意：.button--primary本身不决定颜色，它只是“触发器”；颜色由变量作用域决定。这样切主题只需改变量，不动类名逻辑。
多业务品牌换肤时，data-brand比data-theme更安全
html[data-theme="edu"]这类写法会和系统级data-theme="dark"冲突，且无法叠加（data-theme="edu-dark"权重爆炸）。实际项目应改用data-brand隔离业务上下文：
html[data-brand="edu"] { --color-button-primary: #1d4ed8; }html[data-brand="med"] { --color-button-primary: #059669; }- BEM修饰符只用于标识归属：
.button--brand-edu，但该类名内不写任何颜色，只声明--button-brand: "edu";供JS读取
关键约束：禁止在.button--brand-edu里重定义--color-button-primary——变量覆盖必须发生在HTML根节点，否则继承链断裂，组件内var(--color-button-primary)取不到值。
嵌套超过2层时，变量必须拆到独立作用域
浏览器从右往左匹配选择器，.modal .content .header .title { color: var(--color-text-primary); }意味着每次重绘都要遍历所有.title并逐层验证祖先。性能损耗在低端设备上明显，尤其当--color-text-primary用于动画时。
- 3层嵌套是临界点，第4层必须拆解
- 例如
.modal__content__header__title是反模式，应改为.modal__title+ 独立变量--modal-title-color - 组件级变量声明位置：在
.modal上写style="--modal-title-color: var(--color-text-emphasis);"，而非在:root里堆叠
真正卡顿的从来不是变量本身，而是选择器匹配开销把变量更新拖慢了——这点在滚动中频繁切换主题色时特别明显。
