多级导航菜单应将 nav 和 dropdown 拆为独立 block，dropdown 负责交互逻辑，nav 仅管布局与语义；子 dropdown 非 nav 的嵌套部分，而是独立实例，须避免跨 block 命名如 nav__item__dropdown。
多级导航菜单用 BEM 管理，核心不是“怎么写类名”，而是“哪些该拆成独立 block”。强行把所有层级塞进 nav__item__submenu__link 会立刻失控，必须按交互边界切分。
nav 和 dropdown 必须是两个独立 block
很多人把下拉菜单写成 nav__submenu 或 nav__dropdown，这是最常踩的结构性错误。dropdown 是可复用、可独立显隐、有自身过渡逻辑的交互单元，它和 nav 的职责不重叠——nav 负责整体布局与语义结构，dropdown 负责触发、面板定位、悬停/点击状态管理。
-
nav下只允许直接子元素：如nav__list、nav__item、nav__link - 所有下拉行为相关 DOM（触发按钮、面板容器、内部列表）必须包裹在
dropdownblock 内，例如：<div class="dropdown"><button class="dropdown__toggle"></button><div class="dropdown__menu"></div></div> - nav__item 内部只需放
dropdown实例，不掺杂任何 dropdown 的样式规则
多级嵌套时，子 dropdown 不是 nav__item__dropdown
二级菜单不是一级菜单的“子元素”，而是另一个独立的 dropdown 实例，只是它的触发位置嵌套在上层 nav__item 中。BEM 不允许跨 block 嵌套命名，否则就等于把两个职责耦合在一起，改一个 dropdown 动画会影响整个 nav 结构。
- 正确结构：
<li class="nav__item"><a class="nav__link">产品</a><div class="dropdown">...</div></li> - 错误写法：
nav__item__dropdown、nav__dropdown--level-2、dropdown__menu__submenu - 如果二级菜单需要不同动效或 z-index，直接加
dropdown--secondary这类 modifier，而不是靠父级前缀区分
hover 闪退、菜单消失快的根本原因是 DOM 关系断裂
浏览器里 .dropdown__toggle:hover + .dropdown__menu 失效，90% 是因为中间插了无关节点（比如 Vue 的 <transition>、React 的 Fragment、或手写的 <div class="wrapper">），导致兄弟选择器断链。这不是 CSS 写得不对，是 HTML 结构没对齐 BEM 的假设前提。
立即学习“前端免费学习笔记（深入）”；
- 确保
dropdown__toggle和dropdown__menu在 DOM 中是相邻兄弟节点，或dropdown__menu是dropdown__toggle的直接父级/子级（用:has()时注意兼容性） - 给
dropdown__menu设min-width: max-content，防止内容收缩后鼠标移出热区 - 避免用 JavaScript 直接
remove()dropdown__menu元素；用display: none或visibility: hidden切换更安全，BEM 类名才能持续生效
React/Vue 中别用字符串拼接生成 BEM 类名
写 className={`nav__item ${isActive ? 'nav__item--active' : ''}`} 看似省事，实则埋下维护雷：modifier 状态分散在 JSX 各处，加个 --disabled 就要再补一串三元；更麻烦的是，一旦组件重构，block 名（如从 nav 改成 main-nav），所有拼接点都要手动搜改。
- 每个组件顶部定义常量：
const BLOCK = 'main-nav';，然后统一用${BLOCK}__item派生 - 状态类用对象语法绑定：
className={cx(`${BLOCK}__item`, { [`${BLOCK}__item--active`]: isActive })} - 禁止在 JS 里出现硬编码的
nav__link—— 它和组件声明的 block 名不一致，BEM 就失效了
真正难的不是记住双下划线和双破折号，而是每次加新菜单项时，能下意识问一句：“这个交互逻辑，能不能抽成独立 block？”——答案是“能”，就拆；答案是“不能”，说明它本就不该存在。
