nav 和 dropdown 必须是两个独立 block，nav 只负责导航结构，dropdown 专管下拉行为，二者职责分离、样式解耦、DOM 位置独立，避免命名爆炸与状态污染。
nav 和 dropdown 必须是两个独立 block
导航条里出现二级、三级菜单，不代表要写 nav__item__submenu 或 nav__dropdown--level-2。BEM 的核心约束不是“怎么命名”，而是“谁该负责什么”。nav 只管结构：容器、列表、项、链接；所有下拉行为（触发、面板定位、显隐过渡）必须由独立的 dropdown block 承担。
常见错误现象：nav__item 里硬塞 nav__submenu，结果改个动画就得重测整个导航结构——因为样式和逻辑耦合了。
-
nav下直接子元素只能是nav__list、nav__item、nav__link - 每个可展开区域都应是一个完整
dropdown实例，哪怕它嵌套在nav__item内部 - 子级下拉菜单不是“nav 的后代”，而是另一个
dropdown，只是 DOM 位置在上层dropdown__menu里
.dropdown__toggle:hover + .dropdown__menu 失效怎么办
这个选择器失效，90% 不是 CSS 写错了，而是 HTML 结构破坏了 BEM 对节点关系的假设：兄弟选择器要求 dropdown__toggle 和 dropdown__menu 必须紧邻，中间不能插任何包装节点。
使用场景：Vue 的 <transition>、React 的 <Fragment>、或手写的 <div class="wrapper"> 都会断链。
立即学习“前端免费学习笔记（深入）”；
- 确保二者是相邻兄弟节点，或
dropdown__menu是dropdown__toggle的直接子/父节点 - 若需绕过限制，可用
:has()（注意兼容性：Chrome 105+、Safari 15.4+） - 给
dropdown__menu加min-width: max-content，防止内容收缩后鼠标移出热区 - 加
transition-delay: 0.1s到opacity或transform上，缓解视觉断连感
多级嵌套时如何避免命名爆炸
看到 nav__item__submenu__link 就该警觉：这不是层级深，是结构失焦。BEM 不允许跨 block 嵌套命名，所以不存在“三级”概念，只有多个 dropdown 实例依次嵌套。
参数差异：dropdown--mega 和 dropdown--inline 是合法 modifier，用于表达视觉/行为差异；nav__dropdown--level-2 违反职责分离，导致样式无法复用。
- 一级菜单：
<li class="nav__item">产品<div class="dropdown"></div></li> - 二级菜单：在上层
dropdown__menu里再放一个<div class="dropdown"></div> - 所有
dropdown共享基础样式，差异靠 modifier 控制，不靠父级前缀
响应式下 nav__list--mobile 和 dropdown 如何协同
小屏折叠后，nav__list 加了 nav__list--mobile 类，但里面的 dropdown 实例可能仍按桌面逻辑运行——这不是 bug，是状态没对齐。
性能影响：如果只靠 CSS 媒体查询控制 nav__list--mobile 显示，但 dropdown 仍用 :hover 触发，移动端就会失效。
- 移动端应切换为点击触发，JS 控制
dropdown--expanded类，而非依赖:hover -
nav__list--mobile .dropdown__toggle和nav__list--desktop .dropdown__toggle的交互逻辑要分开写 - 避免在
nav.css里混入dropdown的响应式规则，保持模块职责清晰
dropdown 被当成 nav 的附属品，后续所有 hover 闪退、状态错乱、样式污染，都是结构性债务的利息。 
