tab__item--active 是唯一合法写法，bem 规范仅承认 --modifier 语法；is-active 仅为运行时状态信号，须与 --active 分工协作，不可替代样式主责。
tab__item--active 是唯一合法写法
BEM 官方规范只承认 --modifier 这一种修饰符语法，tab__item--active 表达的是“这个 tab 项在设计层面就存在‘活跃’这一固有变体”，语义封闭、可静态存在、CSS 能独立生效。任何其他形式——比如 is-active、tab__item-active（缺双横线）、tab__item is-active（空格拼接）——都不符合 BEM 命名契约。
常见错误现象：
-
tab__item is-active写成两个 class，但 CSS 规则只写了.tab__item--active，样式完全不生效 -
tab__item-active被 stylelint-bem 或构建工具识别为非法命名，直接报错或漏进 PurgeCSS 白名单 - 用空格拼接后，选择器变成
.tab__item.is-active，一旦组件被 React Fragment 包裹或插入过渡容器，层级断裂导致样式失效
is-active 只能作为 JS 状态信号，不能承担样式主责
is-active 是社区约定的运行时状态类，浏览器不认它语义，只认 DOM 里有没有这个字符串。它不该是样式生效的前提，而应是 JS 查询、A11y 同步、外部逻辑判断的辅助标记。
实操建议：
- CSS 中不单独写
.is-active { display: block; }，必须绑定块/元素：.tab__panel.is-active - JS 切换状态时只操作
is-active：el.classList.toggle('is-active')，但前提是 HTML 和 CSS 已明确配对使用 - 屏幕阅读器需要
aria-selected="true"，仅靠is-active不提供语义，JS 必须同步设置 - PurgeCSS 可能误删未硬编码组合的
is-active，比如只在 JS 字符串拼接中出现，没在 HTML 模板里显式写class="tab__panel is-active"
--active 和 is-active 可以共存，但职责必须切清
它们不是二选一，而是分工协作：一个管视觉表现，一个管状态信号。
典型用法：
-
tab__item--active控制底边框、文字加粗、背景色等 UI 变体，服务端渲染就能写死，JS 失败也不丢样式 -
is-active供 JS 查询：el.classList.contains('is-active')；供路由模块判断当前面板是否激活；供表单校验检查.step.is-active是否完成 - HTML 中同时存在：
<div class="tab__item tab__item--active is-active"> <li>CSS 中分开定义：<code>.tab__item--active负责外观，.tab__panel.is-active负责显隐，互不干扰 -
button--disabled有效，--disabled单独写无效 -
.nav__link--active合法，.is-active全局规则会污染.tooltip.is-active和.sidebar.is-active - 多个状态共存时（如
tab__item--active--loading），BEM 推荐拆成两个修饰符，而非混用is-前缀 - 所有
--修饰符都应出现在 HTML 模板中，而非仅靠 JS 动态注入——否则 PurgeCSS 可能误删，DevTools 里也看不到真实状态
布尔型修饰符必须绑定到具体 Block 或 Element
BEM 不允许孤立的 --active 或 is-active。修饰符永远依附于某个明确的块或元素节点，否则语义断裂、工具链失效、样式不可预测。
容易被忽略的关键点：
