tabitem--active 是唯一合法写法，因 BEM 要求 Modifier 必须以双连字符 -- 开头且依附于明确 Block/Element，is-active 或 tabitem-active 均违反规范，导致样式失效、工具链报错或构建误删。
必须用 tab__item--active 表示选中态，其他写法（如 is-active 或 tab__item-active）在 BEM 下属于语义错误，会导致样式失效、PurgeCSS 误删、JS/CSS 脱节。
为什么 tab__item--active 是唯一合法写法
BEM 要求 Modifier 必须以双连字符 -- 开头，且必须依附于明确的 Block/Element。tab__item--active 清晰表达了“这个 tab 项处于激活状态”，语义封闭、可预测。
-
is-active是无上下文的状态标记，浏览器里看到class="tab__item is-active"就说明 JS 没按 BEM 规则操作 classList，CSS 里写的.tab__item--active自然不生效 -
tab__item-active缺少双连字符，不符合 BEM 命名规范，工具链（如 stylelint-bem）会报错，PurgeCSS 也可能漏掉它 - 用空格拼接多个类（如
tab__item is-active）会让 CSS 选择器变成.tab__item.is-active，这种写法依赖 DOM 结构层级，一旦组件嵌套变深或被框架包裹，权重就压不过基础样式
tab__item--active 的样式必须独立声明
它的规则不能依赖父容器或布局上下文，否则换种排列方式（比如竖排 tab--vertical）就会失效。
- 正确写法：
.tab__item { opacity: 0.7; }和.tab__item--active { opacity: 1; font-weight: 600; }同级定义 - 需要方向差异时，新增修饰符：
.tab--vertical .tab__item--active，而不是让--active自己承担布局逻辑 - 禁用态要显式覆盖：
.tab__item--disabled.tab__item--active或更稳妥地用.tab__item--disabled--active（如果业务允许三重修饰符）
:active 伪类和 --active 修饰符必须分开处理
用户点击瞬间的反馈是瞬时的，而当前选中项是持久状态，二者共存但不可混用。
立即学习“前端免费学习笔记（深入）”；
-
.tab__item:active控制按下时的背景微调、文字位移等瞬时效果 -
.tab__item--active控制高亮色、焦点 outline、z-index 等持久样式 - 移动端注意：
:active默认不触发，可在根元素加ontouchstart=""，或用pointer-events: none配合 JS 模拟 - 禁用状态下需阻止交互反馈：
.tab__item--disabled:active { transform: none; }
切换逻辑只作用于自身元素，不污染父块
激活态只该出现在 tab__item 和对应 tab__panel 上，不要给 tab 容器加 --active 类。
- 常见错误：JS 同时切
tab--active和tab__item--active，结果 CSS 里根本没定义前者，或定义了却意外影响整组样式 - 正确做法：JS 只切换
tab__item--active和tab__panel--active -
tab__panel--active推荐用display: block或visibility: visible控制显隐，避免只靠opacity: 0——后者仍占交互区域，且无障碍阅读器会读取隐藏内容
最易被忽略的是：BEM 不是命名习惯，而是工程约束。一旦在 tab__item 上漏掉 --，或把状态类加到错的元素上（比如加在 tab 容器而非 tab__item），后续所有样式、JS、构建工具行为都会开始漂移。这种问题在多人协作或长期迭代中尤其隐蔽，修复成本远高于初期写对一个双连字符。
