推荐根类名用step-bubble，其下设__content、__arrow两个元素，状态与方向均用--active、--done、--arrow-up等修饰符控制，避免嵌套过深和语义污染，关闭按钮应独立为block而非元素。
步骤引导气泡的BEM结构怎么搭？
BEM不是套个block__element--modifier就完事——关键在语义分层是否匹配“步骤引导”这个动态流程。气泡（bubble）本身是视觉容器，但它的状态（当前步、已完成、禁用）、位置（上/下/左/右箭头）、内容类型（纯文本/带图标/含操作按钮）都得可独立控制。推荐根类名用step-bubble，不叫guide-bubble或onboarding-bubble，因为“step”直接对应业务逻辑中的 step index，后续 JS 控制显隐和 class 切换更直白。
- 根元素：
step-bubble（Block） - 气泡主体：
step-bubble__content（Element） - 箭头指向：
step-bubble__arrow（Element） - 当前步骤态：
step-bubble--active（Modifier） - 已完成态：
step-bubble--done（Modifier） - 箭头方向变体：
step-bubble--arrow-up、step-bubble--arrow-right（Modifier）
别把箭头写成step-bubble__arrow--up：它和气泡定位强耦合，属于同一维度的状态切换，用 Modifier 更利于 CSS 组合与 JS classList.toggle() 控制。
如何避免BEM嵌套过深导致样式冲突？
步骤引导常嵌在 Modal、Sidebar 或 Tooltip 里，容易出现.modal .step-bubble__content这类强行提高权重的选择器。BEM 的本意是扁平化，所以所有样式必须只依赖自身 class，不依赖父容器。
- 所有样式规则以
step-bubble开头，例如：.step-bubble { position: relative; }、.step-bubble__arrow { position: absolute; } - 需要适配不同容器时，用 Modifier 区分，比如
step-bubble--in-modal控制 z-index 和最大宽度，而不是靠外层 class - 如果某步气泡需紧贴目标元素右侧，不要写
.target-element + .step-bubble，而是在 JS 中给气泡加step-bubble--align-right，并在 CSS 中定义.step-bubble--align-right .step-bubble__arrow { left: 100%; top: 50%; transform: translateY(-50%); }
常见错误是给step-bubble<strong>content</strong>写margin-left: 20px来“避开箭头”，结果箭头方向一变就错位——正确做法是让step-bubblearrow用绝对定位撑开空间，内容区域用padding预留，由 Modifier 控制 padding 方向。
立即学习“前端免费学习笔记（深入）”；
JS 动态切换 BEM class 时要注意什么？
步骤引导本质是状态机：用户点击“下一步” → 当前气泡加step-bubble--done，下一项加step-bubble--active。手动管理 class 容易漏切、重复加、或没清旧态。
- 用
element.classList.replace(oldClass, newClass)替代remove+add，避免中间态闪烁 - 所有 Modifier 类名统一前缀，比如只允许
step-bubble--*，禁止出现step-bubble__content--large这种混用层级的写法 - 箭头方向 Modifier（如
step-bubble--arrow-down）应由定位逻辑计算后设置，不要硬编码在 HTML 里；可用data-align="bottom"作标记，JS 读取后映射为对应 class - 注意浏览器对 classList 操作的同步性：在
requestAnimationFrame回调里批量更新，防止 layout thrashing
一个典型坑：用querySelectorAll('.step-bubble')取全部气泡，再遍历el.classList.add('step-bubble--active')，却忘了先remove('step-bubble--active')——结果多个气泡同时高亮。
为什么step-bubble__close不该是 Element？
关闭按钮看似是气泡的一部分，但它行为独立（点击即销毁整个气泡）、样式常复用（全局icon-close），且可能被屏幕阅读器单独聚焦。强行塞进step-bubble__close会带来三重问题：
- 语义污染：
__close不属于气泡的固有结构，而是可选交互控件 - 复用困难：其他组件（如 Alert、Drawer）也要关，却不能直接复用 class
- 可访问性风险：若用
<button class="step-bubble__close">X</button>，辅助技术可能误读为“气泡的关闭部分”，而非“关闭此气泡”
正确做法是：
- 关闭按钮用独立 block：
btn-close或icon-btn--close - 在气泡内部用组合方式：
<button class="btn-close step-bubble__close-trigger"></button> - 仅用
step-bubble__close-trigger做 JS 事件委托钩子，不写样式
这样既保持 BEM 的语义清晰，又不牺牲复用性和可访问性。BEM 的约束力，恰恰体现在知道哪里“不该”用 __element。
