BEM规范下纯CSS Tab切换必须采用语义隔离与状态可预测设计，禁用.tab--active或.is-active等破坏封装性的写法；tab-list与tab-panel须为同级兄弟块，通过data-tab-id或radio+label绑定实现跨块状态控制，并严格遵循ARIA可访问性要求。
纯 CSS 实现 Tab 切换在 BEM 规范下不是加个类名就完事——关键在于语义隔离与状态可预测。直接用 .tab--active 或 .is-active 会破坏块（block）的封装性，导致样式泄漏或状态冲突。
为什么不能直接在 tab-list 上写 :hover 或 :focus 控制面板显隐
BEM 要求每个块独立、可复用。tab-list 和 tab-panel 是两个逻辑上分离但行为强关联的块。用伪类如 :hover 只能影响自身或相邻兄弟（+ / ~），无法跨块定位到另一个块的子元素，除非强行用 DOM 层级选择器（如 .tab-list + .tab-panel），但这违背 BEM “不依赖 DOM 结构”的原则。
常见错误现象：
- 写
.tab-list__item:hover ~ .tab-panel__item—— 一旦中间插入新元素，样式立即失效 - 用
.tab-list--active手动 JS 切换类，但没同步更新tab-panel的状态类，造成视觉/语义不一致 - 把
tab-panel写成tab-list__panel，变成元素嵌套，丧失独立复用能力
tab-list 与 tab-panel 必须是同级兄弟块
这是 BEM 下唯一能稳定建立“点击 tab → 显示对应 panel”关系的 HTML 结构基础。两者共用同一个父容器，且通过统一的状态标识（如 data-tab-id）或隐式顺序绑定，而非 DOM 位置。
立即学习“前端免费学习笔记（深入）”；
推荐结构：
<div class="tabs">
<div class="tab-list">
<button class="tab-list__item" data-tab-id="overview">概览</button>
<button class="tab-list__item" data-tab-id="settings">设置</button>
</div>
<div class="tab-panel">
<div class="tab-panel__item" data-tab-id="overview">...</div>
<div class="tab-panel__item" data-tab-id="settings">...</div>
</div>
</div>
要点：
-
tab-list和tab-panel是平级兄弟，都属于tabs块的直接子元素 - 每个
tab-list__item和对应tab-panel__item用相同data-tab-id关联，而非靠索引序号 -
tab-panel__item默认隐藏：.tab-panel__item { display: none; }，激活项显式设为display: block
CSS 中如何用 :checked + label 绑定实现无 JS 切换
这是目前 BEM 兼容性最好、状态最可控的纯 CSS 方案：用隐藏的 input[type="radio"] 作为状态源，label 触发选中，再用 :checked ~ 定位到同级 tab-panel 中对应项。
关键约束：
- 所有
input必须放在tab-list内部，且与label同级（或包裹关系） -
tab-panel必须紧跟在tab-list后面（满足~选择器作用域） - 每个
tab-panel__item需带唯一 ID，并被label[for]关联，否则:checked + label + ~ .tab-panel__item链路断裂
示例片段：
<div class="tabs">
<div class="tab-list">
<input type="radio" name="tabs" id="tab-overview" checked>
<label class="tab-list__item" for="tab-overview">概览</label>
<input type="radio" name="tabs" id="tab-settings">
<label class="tab-list__item" for="tab-settings">设置</label>
</div>
<div class="tab-panel">
<div class="tab-panel__item" id="panel-overview">...</div>
<div class="tab-panel__item" id="panel-settings">...</div>
</div>
</div>
CSS 控制逻辑：
input[type="radio"] { display: none; }
.tab-panel__item { display: none; }
#tab-overview:checked ~ .tab-panel #panel-overview,
#tab-settings:checked ~ .tab-panel #panel-settings {
display: block;
}
容易被忽略的可访问性与降级点
BEM 不是只管样式命名——它要求结构语义清晰、状态可感知。纯 CSS Tab 最常被忽略的是：
- 未给
tab-list__item添加role="tab"和aria-controls，屏幕阅读器无法识别切换意图 - 未给
tab-panel__item添加role="tabpanel"和aria-labelledby，焦点管理失效 - 默认选中项没设
checked，首次加载时所有tab-panel__item都不可见（display: none未被覆盖） - 移动端 touch 区域太小，没补
min-height或padding，导致点击失败
这些不是“锦上添花”，而是 BEM 块可交付的底线。没有它们，这个 tab-list 就不是一个真正可复用、可测试、可无障碍使用的块。
