nav和dropdown必须是两个独立block，因nav只管语义结构与布局，dropdown专责交互行为，二者职责分离才能避免样式耦合、复用受限与测试爆炸。
复杂下拉菜单的类名混乱，不是因为 BEM 规则写得不够细，而是把 nav 和 dropdown 当成一个东西在命名——它们必须是两个独立 block。
为什么不能用 nav__item__dropdown 这类嵌套名
这种写法看似“体现层级”，实则破坏 BEM 的模块边界。它把布局（nav__item）和交互（下拉显隐、定位、过渡）耦合在一起，导致：
- 改二级菜单动效要写
nav__item__dropdown--slide，但这个 modifier 实际属于 dropdown 行为，不该污染nav命名空间 - 子 dropdown 无法复用到侧边栏或弹窗里，因为它的类名强依赖
nav__item上下文 - 测试爆炸：改一个 dropdown 动画，整个 nav 结构都要回归验证
真正该做的，是承认每一层下拉都是一个可独立实例化的 dropdown block。
正确的 DOM 结构与 class 分配
dropdown__toggle 和 dropdown__menu 必须是相邻兄弟节点，或直接父子关系，否则 .dropdown__toggle:hover + .dropdown__menu 会断链——90% 的 hover 闪退都源于此。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
<li class="nav__item">
产品
<div class="dropdown">
<button class="dropdown__toggle">展开</button>
<div class="dropdown__menu">
<ul class="dropdown__list">
<li class="dropdown__item"><a class="dropdown__link">服务一</a></li>
<li class="dropdown__item">
<a class="dropdown__link">服务二</a>
<div class="dropdown"> <!-- 子 dropdown，独立实例 -->
<button class="dropdown__toggle">更多</button>
<div class="dropdown__menu">...</div>
</div>
</li>
</ul>
</div>
</div>
</li>关键点：
-
nav下只允许nav__list、nav__item、nav__link这类语义化子元素 - 所有触发、面板、列表逻辑全部收进
dropdownblock 内部 - 子级 dropdown 不是
dropdown__menu__submenu，就是另一个dropdown
怎么用 Modifier 区分不同下拉行为
层级差异不靠父级前缀，而靠 modifier 控制变体：
- 触发方式：
dropdown--hovervsdropdown--click - 尺寸/布局：
dropdown--mega（宽面板）、dropdown--inline（内联式） - 定位约束：
dropdown--right（右对齐）、dropdown--bottom（底部弹出）
避免写 nav__dropdown--level-2 或 dropdown__menu--secondary——这些 modifier 没有语义，且无法跨场景复用。
移动端与 DOM wrapper 导致的选择器失效
框架（如 Vue 的 <transition></transition>、React 的 <fragment></fragment>）常在 dropdown__toggle 和 dropdown__menu 之间插入 wrapper 节点，导致兄弟选择器失效。
应对方案：
- 优先用
.dropdown:hover .dropdown__menu替代+选择器，但需确保.dropdown有position: relative - 触屏设备补
:focus-within，如.dropdown:focus-within .dropdown__menu - 禁用
min-width: max-content防止菜单收缩后鼠标移出热区 - 显隐控制用
display: none或visibility: hidden，别用remove()
最易被忽略的是：BEM 的有效性高度依赖 HTML 结构是否对齐其假设——不是类名没写对，是 DOM 关系先断了。
