应使用tab__item--active而非is-active，因其是bem原生修饰符，语义明确、可静态存在、css独立生效且不依赖js；is-active仅为社区状态类，易被误删、需与块名共存、仅作js/a11y信号辅助。
什么时候该用 tab__item--active 而不是 is-active
BEM 的 --active 修饰符表达的是组件设计层面的固有变体，比如导航项“被设计为当前选中项”这一语义角色。它可静态存在于 HTML 中，CSS 能独立定义样式，不依赖 JS 加载或执行。如果你的 tab 项在服务端渲染时就已知哪个是当前项（如路由匹配决定），tab__item--active 是更稳妥的选择——它可被 PurgeCSS 安全保留，DevTools 里一眼可见，且不会因 JS 失败而丢失视觉反馈。
常见错误现象：tab__item is-active 拼成两个独立 class，但 CSS 规则只写了 .tab__item--active，结果样式完全不生效；或者用 classList.toggle('is-active') 切换，却忘了在 CSS 中同时覆盖所有可能的父级上下文（如 .tabs--vertical .tab__item.is-active）。
-
--active应用于有明确设计态的元素，如nav__link--active、button--disabled - 修饰符必须绑定到具体块或元素，不能单独使用
--active - 它不承担“运行时状态同步”职责，只声明“这个实例就是活跃变体”
为什么 is-active 必须配合基础类一起出现，不能单独写 .is-active
is-active 是社区衍生的状态类，不是 BEM 原生语法，浏览器只认 class 字符串是否存在，不认语义。如果只写 .is-active { display: block; }，那它会全局生效——.tooltip.is-active 和 .sidebar.is-active 都会被强制显示，动画也可能被意外重置。
正确做法是让状态类始终与块/元素名共存：.tab__panel.is-active、.user-card.is-loading。这样既保证作用域隔离，又能让 PurgeCSS 正确识别使用痕迹（只要 HTML 或 JS 中真实调用了 tab__panel + is-active 组合）。
- 单独
.is-active规则极易引发样式泄漏和覆盖冲突 - 构建工具（如 Tailwind 的
content扫描或 PurgeCSS）可能误删未硬编码的is-active - 屏幕阅读器需要
aria-current="page"或aria-selected="true"，仅靠is-active不提供语义
tab__item--active 和 is-active 能共存吗？怎么分工？
能共存，而且推荐共存，但必须职责切清：前者管视觉表现，后者管状态信号。
tab__item--active 控制加粗文字、底边框、背景色等 UI 变体；is-active 则作为 JS 查询依据（el.classList.contains('is-active')）、A11y 属性同步触发点（如自动加 aria-selected="true"）、或外部模块判断条件（如表单校验逻辑检查 .step.is-active 是否完成）。
- JS 只操作
is-active（增删），不碰--active - CSS 样式由
--active承担，is-active仅作轻量辅助（如显隐、过渡开关） - 检查 Elements 面板，确认 class 属性里同时存在
tab__item--active和tab__item is-active是两个不同字符串，不是拼错或空格遗漏
框架里遇到 isDisabled={true} 怎么映射到 BEM？
React/Vue 等框架的布尔 prop（如 isDisabled）只是 JS 行为开关信号，它不该直接变成 class 名。正确映射是：prop 触发添加对应 BEM 修饰符，例如 isDisabled={true} → 渲染 class="button button--disabled"，而不是 class="button is-disabled"。
否则会出现样式断层：CSS 写了 .button--disabled，但 DOM 里只有 is-disabled，视觉毫无变化；或者反过来，CSS 依赖 .is-disabled，但 PurgeCSS 把它删了，因为模板里没出现过这个字符串。
- 框架层只负责传递状态，BEM 类名生成应封装在组件内部逻辑中
- 避免在 JSX 中手动拼接
className={\`button \${isDisabled ? 'is-disabled' : ''}\`} - 真正容易被忽略的是：即使用了
is-前缀，也必须确保它和块名成对出现，且 CSS 规则覆盖完整上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
