BEM修饰符应写为.tab.tab--active，确保基础类与修饰符共存；命名需语义明确、避免嵌套；样式隔离靠唯一块名如.user-tabs__tab.user-tabs__tab--active；注意特异性、构建工具误删及JS操作时机。
怎么用BEM修饰符写选项卡的 active 状态
直接加 .tab--active 就行，但得确保它比默认样式权重高，且不依赖父级状态。BEM 的修饰符本质是“同一块结构的不同视觉变体”，不是靠 JS 动态塞 class 名就完事——关键在命名是否可预测、是否能被 CSS 独立复用。
- 修饰符名必须语义明确，比如
.tab--active比.tab--on更易懂；.tab-panel--visible比.tab-panel--show更符合 BEM 原则（描述状态，而非动作） - 避免嵌套修饰符，如
.tab--active--disabled—— 这违反 BEM 单一职责，应拆成.tab--active.tab--disabled - CSS 中修饰符必须和基础类同时出现：
.tab.tab--active，不能只写.tab--active（否则无法独立复用，也破坏 BEM 可维护性）
为什么 .tab--active 有时不生效
大概率是 CSS 特异性（specificity）被覆盖，或 HTML class 顺序/拼写出错。BEM 修饰符本身没魔法，它只是 class 名约定，真正起作用的是浏览器如何匹配规则。
- 检查是否写了
.tab--active但漏了基础类.tab，比如 HTML 是<div class="tab--active"> —— 这个 class 根本不会命中 <code>.tab.tab--active规则 - 确认没有更高权重的选择器干扰，例如
.tabs > .tab.active或带!important的旧样式，会压过.tab.tab--active - 注意构建工具是否自动去除了未使用的 class（如 PurgeCSS），若
.tab--active只在 JS 中动态添加，可能被误删 —— 需在 safelist 中显式保留/tab--(active|disabled|loading)/ - 不要用
.tabs .tab--active这种泛化写法，它会让所有选项卡组的 active 样式耦合在一起 - 正确方式是分别定义：
.user-tabs__tab.user-tabs__tab--active和.settings-tabs__tab.settings-tabs__tab--active，哪怕样式完全一样，也保持命名独立 - 如果真要复用视觉样式，提取为抽象工具类（如
.is-active），但 BEM 块内仍保留语义修饰符 —— 工具类只管表现，BEM 类只管结构含义 - 移除旧
--active前，先查当前是否有.tab--active元素，别硬写el.classList.remove('tab--active')而不检查 el 是否存在 - 如果有 CSS 过渡（如
opacity或max-height），别在click后立刻切 class，等transitionend触发后再操作面板显示，否则视觉错乱 - 避免用
document.querySelectorAll('.tab')获取全部 tab 再遍历 —— 若页面有多个选项卡组，这会跨组误操作；改用就近查找：tabGroupElement.querySelectorAll('.tab')
多个选项卡组共存时怎么隔离样式
靠 BEM 的块级命名空间隔离，而不是靠父子选择器或 JS 绑定作用域。每个选项卡组应有自己唯一的块名，比如 .user-tabs 和 .settings-tabs，它们的修饰符互不干扰。
JS 切换时 class 更新不及时或残留
不是 BEM 的问题，是 class 操作逻辑没对齐 DOM 更新节奏。常见于异步切换、过渡动画未结束就更新、或事件监听范围不对。
立即学习“前端免费学习笔记（深入）”；
.tab--active 就会变成谁也不敢动的“幽灵 class”。
