浮动按钮必须定义为 block（如 fab），不能作为其他组件的 element；其子节点 fab__icon 和 fab__badge 仅限直接子元素且不可嵌套；modifier 如 fab--mini 可叠加但需平级声明；悬浮菜单应为独立 block（fab-menu），通过事件与 ARIA 协作。
浮动按钮该定义成 block 还是 element？
浮动按钮（如右下角的 + FAB）必须是一个独立 block，不能作为其他组件的 element。它有完整交互逻辑（点击展开、悬浮动画、无障碍焦点管理）、可复用场景（首页、列表页、详情页都可能复用），且 DOM 结构自包含（图标 + 微动效容器 + 可选 badge）。写成 page__fab 或 card__fab 是典型错误——这会让它失去独立性，一旦挪到新上下文就得重写样式甚至 JS 绑定。
fab__icon 和 fab__badge 算不算合法 element？
算，但必须满足两个硬条件：
-
fab__icon和fab__badge都只能是fab的**直接子节点**，中间不能嵌套div或span包裹层 - 它们不能进一步拆出子 element（比如禁止
fab__icon__svg或fab__badge__count）——BEM 不允许 element 嵌套 element
常见错误是把 SVG 写成内联结构后，给其中的 <path></path> 加类名，这已脱离 BEM 约束；正确做法是整个 SVG 作为 fab__icon 的内容，样式通过 fab__icon svg { ... } 控制。
fab--mini、fab--primary 这类 modifier 能否叠加？
可以叠加，但 CSS 规则必须避免权重依赖：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确写法：
.fab--mini { width: 32px; height: 32px; }和.fab--primary { background-color: var(--color-brand); }是平级声明，无先后顺序要求 - ❌ 错误写法：
.fab.fab--mini或.fab--mini.fab--primary——这种写法隐含“先有 .fab 才能加 modifier”，违反 BEM 单类名自治原则 - ⚠️ 注意冲突：fab--mini 和 fab--large 互斥，文档中必须明确标注“不可共存”，否则开发者叠加后尺寸行为不可预测
如何处理悬浮菜单这类动态子结构？
悬浮菜单不是 fab 的 element，而是一个**并列 block**，比如 fab-menu。原因很实际：
- 菜单项数量、文案、图标都由业务数据驱动，与 FAB 自身逻辑解耦
- 菜单需要独立定位（常脱离 FAB 容器做 transform 或 portal 渲染），强行塞进
fab__menu会导致样式和 JS 行为耦合过重 - 两者通过事件通信（如
fab:open-menu）协作，而非 DOM 层级绑定
真正要做的，是在 JS 中控制 fab 和 fab-menu 的显示状态同步，并用 ARIA 属性（aria-controls / aria-expanded）建立语义关联——BEM 管命名，不替你管交互契约。
