tab容器的bem命名必须统一使用tabs为block根名，所有子元素（如tabs__item、tabs__panel）和修饰符（如tabs--scrollable、tabs__item--active）均严格派生自tabs，禁止混用tab、tab-group等变体，确保语义唯一、作用域锁定、维护可控。
Tab容器的BEM命名必须锁定 tabs 作为 block 根名
不能用 tab、tab-group 或 ui-tabs 等变体——BEM 要求 block 名是语义唯一且复用稳定的。所有子元素和修饰符都必须从 tabs 出发派生，否则后续维护时会无法统一识别作用域。
常见错误：
• 把切换项写成 tab__item（block 错了，应是 tabs__item）
• 在同一页面混用 tabs 和 tab-list，导致样式隔离失效
• 给整个组件加额外 wrapper 并命名为 my-page__tabs，破坏 block 的独立性
tabs__item 和 tabs__panel 必须严格一一对应
这是 BEM 中 element 层级的关键约束：每个 tabs__item 控制一个且仅一个 tabs__panel。不能靠 JS 动态拼接 class 名来“模拟”关联，也不能用 data-tab-id 替代结构约定。
实操建议：
• HTML 中让 tabs__item 和 tabs__panel 同级或嵌套在同一个 tabs 下，保持 DOM 可推导性
• 避免写 tabs__item--active 却不同时给对应 panel 加 tabs__panel--active，否则 CSS 无法用相邻/兄弟选择器安全联动
• 不要用 tabs__content 这类模糊名，必须明确是 tabs__panel（语义=面板内容区）
状态类必须用 -- 修饰符，禁用 _ 或布尔类名
BEM 规范里，-- 表示状态变更（如激活、禁用），而 _ 是旧式命名残留，现代项目中已淘汰。用布尔类名（如 is-active）会脱离 block 上下文，导致样式污染或覆盖困难。
正确写法：
• tabs__item--active
• tabs__item--disabled
• tabs__panel--hidden
错误写法：
• tabs__item_active（下划线违反规范）
• tabs__item.is-active（混合 OOCSS，破坏 BEM 封装）
• tabs__item--selected（语义不一致，“selected” 多用于表单，“active” 才表示当前选中态）
响应式或主题变体要收束到 tabs-- 修饰符下
横向滚动、紧凑间距、暗色模式等，都属于 block 整体变体，不是某个 element 的状态，所以必须挂载在 tabs 根元素上，例如：tabs--scrollable、tabs--compact、tabs--dark。
这样做的好处：
• CSS 可以用 .tabs--scrollable .tabs__item 精确控制子元素行为，避免全局污染
• JS 切换主题时只需操作根节点 class，无需遍历所有子元素
• 不会和 tabs__item--active 这类 element 修饰符产生优先级冲突
容易被忽略的一点：当同时存在多个修饰符（如 tabs--scrollable tabs--dark），CSS 规则顺序会影响最终表现——建议把通用布局类（--scrollable）放前面，视觉类（--dark）放后面，方便层叠覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
