应使用带业务语义的块名，如.user-profile-tabs、.settings-tabs、.product-detail-tabs，而非泛化的.tabs；状态同步推荐用is-active类而非--active修饰符，确保语义清晰、可维护性强。
tabs组件该用哪个块名，而不是.tabs
直接写.tabs是错的——它太泛，和原生<tabs>标签或框架内置组件冲突风险高。真正有效的块名必须带业务语义：.user-profile-tabs、.settings-tabs、.product-detail-tabs。这些名字能天然隔离样式，避免不同页面的选项卡互相覆盖。
常见错误现象：.tabs__item在用户页和订单页共用，结果改一个地方，另一个页面的圆角/间距全乱了。原因就是tabs没绑定上下文，它不是组件，只是个“概念”。
使用场景决定命名粒度：
- 同一业务域下多个选项卡集合（如后台系统里所有“配置类”Tab），可用
.config-tabs作为统一前缀 - 但若某页选项卡逻辑特殊（比如带搜索过滤的 Tab 列表），就该独立命为
.filterable-tabs，不强行复用 - 禁止出现
.tabs--admin这类修饰符来模拟业务区分——修饰符不承担语义锚定职责
tab-panel怎么同步active状态，别靠JS塞class
状态同步的核心不是“让panel显示”，而是“让panel知道自己属于哪个active tab”。BEM里最稳妥的做法是：每个tab-panel都带data-tab-id，对应tabs__item的data-tab-id，然后用is-active这个state类控制显隐，而不是tabs__panel--active。
立即学习“前端免费学习笔记（深入）”；
为什么不用Modifier做状态？因为tabs__panel--active暗示这是面板自身的固定变体（比如“大号面板”“折叠面板”），而实际它是随用户点击动态切换的，属于跨组件可识别的状态。用is-active能被其他模块（如路由、表单校验）一致读取。
实操建议：
- HTML中始终同时存在基础块名和state类：
<div class="user-profile-tabs__panel is-active"> - CSS里写
.user-profile-tabs__panel.is-active { display: block; }，不依赖后代选择器 - JS只负责切换
is-active，不操作display内联样式或自定义属性 - 避免
tabs__item--active + .tabs__panel这种相邻兄弟选择器——DOM插入Fragment或过渡包装会直接断链
tabs__item--active和is-active能共存吗
能，而且推荐共存，但职责必须切清：tabs__item--active管视觉（加底边框、加粗文字、调整padding），is-active管状态（供JS查询、供A11y读屏、供外部逻辑判断）。
常见错误现象：只加tabs__item--active，结果屏幕阅读器无法感知当前选中项；或者只加is-active，但CSS没写对应规则，视觉毫无变化。
参数差异很关键：
-
tabs__item--active必须和tabs__item一起出现：class="tabs__item tabs__item--active"，不能单独用 -
is-active可以单独存在，也能和其他state类组合：class="tabs__item is-active is-pending" - 不要写
tabs__item--active is-active——Modifier和State语义重叠，徒增维护成本
性能影响小，但可读性提升明显：团队新人一眼能分清“哪部分是设计师调的样式”，“哪部分是前端留的接口钩子”。
内容区切换时，如何避免闪动或白屏
根本问题不在CSS动画，而在DOM结构是否允许CSS快速接管。如果tabs__panel是通过v-if或ngIf销毁重建，那再顺滑的opacity过渡也救不了——浏览器得重新计算布局、加载图片、触发重排。
正确做法是保持所有panel始终在DOM中，仅用is-active切换visibility: hidden或position: absolute; clip-path: inset(0 0 0 100%)这类不影响渲染流水线的隐藏方式。
容易踩的坑：
- 用
display: none配合transition——无效，display不可动画 - 给
tabs__panel加height: 0; overflow: hidden再过渡height——触发布局抖动，尤其内容高度不固定时 - 在React里用
key强制重渲染panel——完全绕过BEM状态管理，把样式逻辑和组件生命周期绑死了
复杂点在于：当某个panel内容极重（比如含图表、视频），你可能真得懒加载。这时is-active要变成is-loaded is-active两阶段，CSS先显骨架，JS加载完再补内容——但块名和状态命名规则不能破。
