tab--active 必须仅绑定到单个 tab 元素，不可作用于 tablist；修饰符需语义清晰、正交解耦；tab-panel 命名须自洽独立；状态同步由 JS 原子化控制，不可依赖 CSS 选择器联动。
tab--active 修饰符必须绑定到单个 tab 元素，不能作用于整个 tablist
常见错误是给 .tablist 加 .tablist--active 类，再靠后代选择器控制子项样式。这违背 BEM 原则：tablist 是容器块，不承担“当前激活”语义；激活态只属于某个具体 tab。
正确做法是把 tab--active 仅加在当前选中的 <button class="tab"> 上。JS 切换时只操作该元素的 class，不波及父容器或兄弟节点。
-
.tab--active必须和基础类.tab同时存在，不能单独使用 - 禁用
.tab--disabled和.tab--active同时出现 —— 逻辑上不可能既激活又禁用 - 若需视觉降级（如禁用态仍显示高亮），应通过
.tab--disabled.tab--active组合显式声明，而非覆盖.tab--active样式
tab--icon、tab--count 这类修饰符要正交，避免耦合布局逻辑
很多项目写 .tab--with-icon 或 .tab--has-count，看似描述存在性，实则暴露了 DOM 结构细节，导致后续改用 SVG 替代 icon、或把 count 挪到 badge 组件时样式断裂。
修饰符应表达意图而非实现：.tab--icon-left 比 .tab--with-icon 更可控，它不关心 icon 是 img、svg 还是伪元素，只声明“图标在左侧”这一布局意图。
立即学习“前端免费学习笔记（深入）”；
-
.tab--icon-left和.tab--icon-right互斥，不可共存 -
.tab--count-badge表示“计数以 badge 形式呈现”，而非“有数字”，这样换用徽标组件时只需改这个修饰符 - 所有修饰符都应能在不修改 HTML 结构的前提下生效 —— 例如
.tab--icon-left应通过 flex-direction 或 grid-template-columns 控制，不依赖.tab__icon是否存在
tab-panel 的 BEM 命名必须与 tab 保持对称，禁止跨块引用
错误写法：.tab-panel__content 或 .panel--active。前者把 panel 当作 tab 的子元素，后者脱离了 block 上下文，无法被 stylelint-bem-pattern 校验。
tab-panel 是独立 block，命名必须自洽：.tab-panel 是块名，.tab-panel__header、.tab-panel__body 是其元素，.tab-panel--active 是其修饰符。它和 .tab--active 之间无直接 CSS 关联，状态同步由 JS 控制 class 分发。
- 激活面板的显示/隐藏，应由 JS 同时设置
.tab--active和.tab-panel--active，而非用.tab--active + .tab-panel这类相邻兄弟选择器 - 禁止写
.tab--active .tab-panel—— 这破坏了块的封装性，且当 tab 和 panel 不在同级 DOM 中时失效 -
.tab-panel--loading可单独存在，用于异步加载内容前的占位，与 tab 状态解耦
切换时的 class 操作必须原子化，避免中间态残留
典型 bug：JS 先移除旧 .tab--active，再添加新 .tab--active，中间存在短暂无激活态的窗口，键盘用户按 ←→ 键会跳过焦点，或屏幕阅读器丢失当前页签。
正确做法是用一次 DOM 更新完成状态切换，例如用 Element.classList.replace() 或批量操作：
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.classList.toggle('tab--active', tab === targetTab);
});
- 不要用
className = 'tab tab--active'字符串拼接 —— 容易漏掉原有修饰符如tab--disabled - SSR 渲染时，服务端必须输出与客户端初始状态一致的
.tab--active，否则 hydration 会触发闪烁或 class 重置 - 如果 tab 支持键盘导航（Tab/←→），
.tab--active必须同步更新aria-selected="true"，且未激活项设为"false"，不能只靠 class 控制可访问性
tab--active 和 tab-panel--active 的 class 一致性，是 JS 控制流的责任，不是 CSS 能兜底的。任何试图用选择器联动两者的写法，都会在 DOM 结构变化或 SSR 场景下失效。 
