不能用 nav__item__dropdown 这类嵌套命名，因其违背 BEM 职责分离原则：dropdown 应是独立可复用的交互块，而非 nav__item 的布局子元素；正确做法是每个下拉均用独立 dropdown 块，通过修饰符（如 dropdown--hover）区分行为，DOM 层级实现递归，确保自洽与解耦。
为什么不能用 nav__item__dropdown 这类嵌套命名
这不是写得不够“深”，而是职责错位。nav__item__dropdown 暗示 dropdown 是 nav__item 的子元素，但语义上它是个完整交互单元：要管理显隐、定位、动效、键盘导航——这些和 nav 的布局职责完全不重叠。一旦你加个 dropdown--slide 动效，就不得不写成 nav__item__dropdown--slide，等于把交互逻辑寄生在布局块里。
常见错误现象：
-
nav__item内部直接写.dropdown__menu样式规则 - 二级菜单 hover 闪退，查半天 CSS 却发现是 DOM 断链
- 改一个下拉动效，整个导航结构都要回归测试
多级菜单必须用独立的 dropdown block 复用
每一层下拉都是可独立实例化的 dropdown，不是“子级元素”。BEM 不靠类名深度表达嵌套，而靠 DOM 层级 + 块复用实现递归。
正确结构要点：
立即学习“前端免费学习笔记（深入）”；
-
nav__item内只放一个<div class="dropdown"></div>，不掺杂任何dropdown__相关样式 - 二级菜单就放在上层
dropdown__menu内部，再嵌一个<div class="dropdown"></div> - 差异靠修饰符控制：
dropdown--hover、dropdown--click、dropdown--mega，而非nav__item__dropdown或dropdown__menu__submenu
.dropdown__toggle:hover + .dropdown__menu 失效怎么办
90% 的 hover 闪退不是 CSS 写错了，是 HTML 结构没对齐 BEM 的前提假设：这个选择器要求两个元素必须是紧邻兄弟节点。
容易被忽略的断裂点：
- Vue 的
<transition>包裹了dropdown__toggle或dropdown__menu - React 使用
<Fragment>导致中间插入空节点 - 手写 wrapper 如
<div class="wrapper">插在 toggle 和 menu 之间
可行解法：
- 确保结构为：
<button class="dropdown__toggle"></button><div class="dropdown__menu"></div>（无间隔） - 若框架强制 wrapper，改用
.dropdown:hover .dropdown__menu，并给.dropdown加position: relative - 给
.dropdown__menu加min-width: max-content，防内容收缩后鼠标移出热区
JS 控制显隐时最常踩的坑
直接 remove() dropdown__menu 节点，会导致 BEM 类还在但结构已断裂——后续状态类（如 .dropdown--open）失去作用目标，CSS 规则失效，动效无法触发。
安全做法：
- 用
display: none或visibility: hidden切换显隐，保留 DOM 结构 - 状态类（如
.dropdown--open）由 JS 主动添加/移除，与 CSS 规则严格对应 - 避免在
dropdown__menu上写transition时漏掉transform或opacity的初始值，否则动画可能不触发
复杂点不在怎么写类名，而在是否让每个 dropdown 真正自洽：它得能脱离 nav 单独存在、测试、配置触发方式、替换动效——否则所谓“多级”，只是把耦合藏得更深而已。
