tab__item--active 是唯一推荐写法，因它符合 BEM 规则、保障 CSS/JS 一致性、避免 PurgeCSS 误删、支持样式独立可预测、区分持久状态与瞬时伪类，并确保无障碍与静态分析兼容。
tab__item--active 是唯一推荐的写法，不是可选项，而是 BEM 语义与工程可控性的底线。
为什么不能用 is-active 或 tab__item-active
前者是脱离上下文的状态标记，后者根本不符合 BEM 命名规则（缺双下划线）。浏览器 DevTools 里看到 class="tab__item is-active"，说明 JS 和 CSS 已经脱节——CSS 规则大概率是 .tab__item--active，而 classList 没加对，样式自然不生效。PurgeCSS 也容易把 is-active 当作未使用类删掉。更隐蔽的问题是：React/Vue 中动态拼接 class 字符串时，tab__item is-active 这种空格分隔写法，会让 CSS 选择器 .tab__item.is-active 依赖父级结构，一旦组件嵌套变深，权重就压不过默认样式。
tab__item--active 的样式必须独立、可预测
它不该依赖 .tab--vertical .tab__item--active 这类后代选择器；所有修饰符样式应与基础类同级声明：
.tab__item { opacity: 0.7; }
.tab__item--active { opacity: 1; font-weight: 600; }
这样无论 tab 是横向还是纵向布局，只要元素带 tab__item--active，视觉反馈就确定可靠。如果需要不同方向下的细微差异（比如 vertical 下 active 项加左边框），应新增方向修饰符：.tab--vertical .tab__item--active，而不是让 --active 自身承担布局逻辑。
Active 状态和伪类 :active 必须分开处理
用户点击瞬间的压感反馈属于 :active，而当前选中项是持久状态，二者共存但互不替代：
-
.tab__item:active控制按下时背景微调、文字位移等瞬时效果 -
.tab__item--active控制高亮色、z-index、焦点 outline 等持久样式 - 禁用状态下，要显式覆盖：
.tab__item--disabled:active { transform: none; } - 移动端需注意：
:active默认不触发，可给根元素加ontouchstart=""或用pointer-events: none配合 JS 模拟
切换逻辑必须只操作 DOM 元素自身，不波及父块
激活态只该出现在 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—— 后者仍占交互区域且无障碍阅读器会读取 - 键盘导航时，
tab__item--focused应单独存在，与--active正交；两者可同时出现（如用键盘选中后按回车）
真正难的不是写对一个 class 名，而是确保所有状态类都落在「可被静态分析、可被 PurgeCSS 识别、可被键盘/屏幕阅读器一致感知」的同一套命名契约里。一旦在某个组件里破例用了 is-active，后续维护者就很难再坚持住边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
