推荐用 state 类名 tabs__item.is-active，因其表达运行时动态状态，避免被误认为预设变体；须配合 js 动态增删、限定选择器范围、支持键盘导航、精准控制 transition 且 ssr 需对齐激活逻辑。
激活态该用 modifier 还是 state？
BEM 规范里，tabs<strong>item--active</strong> 和 tabsitem.is-active 都有人用，但语义和维护成本差得挺远。modifier（--active）表示组件的预设变体，比如「大号」「禁用」「暗色」——这些在设计系统里是明确定义的形态；而激活态是运行时动态切换的 UI 状态，不属预设，用 modifier 容易让后续开发者误以为这是可配置的样式分支。
推荐统一用 state 类名：tabs__item.is-active。它不参与 BEM 的 block–element–modifier 三层结构，只表达“此刻这个 item 被选中”，和 is-disabled、is-loading 属同一类逻辑。
- state 类名必须配合 JavaScript 动态增删，不能写死在 HTML 模板里
- CSS 中避免给
.is-active单独写权重过高的规则，优先走tabs__item.is-active这种组合选择器 - 不要混用：同一个项目里别一部分用
--active，另一部分用.is-active
怎么避免 .is-active 被其他样式意外覆盖？
常见问题是：加了 .is-active，但背景色或文字色没生效，查来查去发现是某个全局 .tabs<strong>item:hover</strong> 或父级 .tabs_theme_dark .tabsitem 的权重更高。
关键不是堆 !important，而是靠 BEM 的命名约束提升选择器可控性：
- 所有与激活态相关的样式，必须限定在
tabs<strong>item.is-active</strong>或其子元素内，例如：.tabsitem.is-active { background-color: #007bff; color: #fff; } .tabs<strong>item.is-active .tabs</strong>item-icon { filter: brightness(1.2); } - 避免在主题类（如
.tabs_theme_card）里重写.tabs<strong>item</strong>的基础样式，改用嵌套：.tabs_theme_card .tabsitem.is-active - 如果用了 CSS-in-JS 或 PostCSS，确保
.is-active的生成顺序在普通状态之后（否则层叠会失效）
用 JS 切换 is-active 时容易漏掉什么？
最常被忽略的是键盘导航支持。只响应 click 事件，会让 Tab 键聚焦后按 Enter / Space 无法激活，也不符合可访问性要求。
- 必须监听
keydown，对Enter和Space键触发相同逻辑 - 切换前先移除所有兄弟节点的
.is-active，再给当前加 —— 否则可能多选 - 如果 tabs 支持右键菜单或快捷键（如 Ctrl+1 切到第 1 个 tab），也要同步更新
.is-active - 不要直接操作
className字符串拼接，用element.classList.toggle('is-active', true)更安全
要不要给 is-active 加 transition？
要，但得小心过渡范围。很多人一加就是 all 0.2s ease，结果 hover 色彩、边框粗细、甚至 transform 都跟着动，视觉上反而显得卡顿或干扰焦点。
只对明确需要平滑变化的属性加 transition：
-
background-color -
color -
border-bottom-color（如果用底部横线表示激活） -
transform（仅限 scale 或 translateY 等轻量变换）
.tabs__item {
transition: background-color 0.15s, color 0.15s, border-bottom-color 0.15s;
}
.tabs__item.is-active {
/* 不在这里写 transform: scale(1.02) 这类容易引发重排的 */
}
真正难处理的是服务端渲染（SSR）场景下首屏激活态闪动 —— JS 注入前 DOM 已带 .is-active，JS 初始化又重新算一遍。这时候得让服务端和客户端对齐激活逻辑，或者用 data-active-id 这类属性做标记，比纯 class 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
