直接写 .btn--dark 更稳，因BEM修饰符天然隔离作用域、编译即确定；CSS变量易在多主题嵌套、伪类继承、SSR中漏更新或污染。
为什么直接写 .btn--dark 比用 CSS 变量切主题更稳？
因为 BEM 修饰符天然隔离样式作用域，不依赖运行时状态或级联顺序。CSS 变量在多主题嵌套、伪类继承、SSR 渲染时容易漏更新或污染，而 .btn--dark 是静态类名，编译即确定，浏览器渲染零歧义。
实操建议：
- 每个组件只定义一组基础类名（如
.button），所有变体用--修饰符表达（.button--primary、.button--dark） - 禁止在修饰符里再嵌套修饰符（如
.button--dark--large），这会破坏语义且难维护 - 主题切换时，只替换根节点的
data-theme属性或 body 类，其余组件靠修饰符自行响应，不靠 JS 动态加类
如何避免 BEM 修饰符在不同主题下互相覆盖？
核心是控制选择器权重和作用域。BEM 本身不解决冲突，但配合命名规范和构建流程可以规避。
常见错误现象：.card--dark .card__title 被 .card__title 的通用样式覆盖，或者两个主题的 --dark 修饰符定义在不同文件里，后加载的 CSS 覆盖了前者的颜色声明。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 所有主题相关样式必须放在同一份 CSS 文件中，按组件维度组织，而不是按主题维度（即不要拆成
theme-light.css和theme-dark.css） - 修饰符样式必须带组件名前缀，禁用孤立的
.--dark类；正确写法是.header--dark，不是.--dark - 用 PostCSS 或构建工具校验：禁止出现未绑定到块名的双连字符选择器（如
[class*="--"]不匹配.button前缀的就报错）
:is() 能简化多主题选择器吗？小心兼容性陷阱
可以简化书写，比如把 .button--light .button__text 和 .button--dark .button__text 合并为 .button:is(--light, --dark) .button__text，但目前不支持这种写法 —— :is() 里不能直接写修饰符片段，必须是完整选择器。
正确用法示例：
.button:is(.button--light, .button--dark) .button__text {
color: var(--text-primary);
}
但要注意：
-
:is()会取括号内最高优先级选择器的权重，.button--dark权重高于.button，整个:is()表达式权重就变高，可能意外提升覆盖能力 - Safari 15.4 以下不支持
:is()，如果项目需兼容旧版 iOS，得回退到重复声明或用构建时展开 - Webpack/Vite 默认不处理
:is()中的 BEM 类，别指望它自动注入前缀
组件库封装时，怎么让使用者不误用修饰符？
修饰符不是开关，而是明确的状态断言。用户写 <button class="button--dark"></button> 没问题，但写 <button theme="dark"></button> 再由组件内部拼类名，就绕过了 BEM 的静态可读性优势，也增加了运行时出错路径。
实操建议：
- 组件库文档里，明确标注每个修饰符对应的实际含义（
.input--error表示“已触发校验失败”，不是“只要想显红色就加”） - 提供 ESLint 插件规则，检测是否对非 BEM 块名使用了
--（如div--red报错） - 构建时生成 CSS scope map，确保
.modal--fullscreen只在.modal下生效，防止被外部样式穿透或误匹配
BEM 修饰符的边界感很关键：它不负责逻辑判断，只负责样式映射。一旦开始用 JS 控制修饰符增删，就该怀疑是不是该换 CSS-in-JS 或设计系统变量方案了 —— 不是不能，是信号变了。
