纯CSS下拉菜单必须用BEM规范，否则DOM结构调整会导致伪类失效；正确做法是将下拉区域设为独立block（如dropdown），由其自身控制展开状态，所有__元素须包裹在声明的block容器内，修饰符--open必须绑定到block而非子元素。
纯 CSS 下拉菜单必须用 BEM，否则只要 DOM 结构微调或复用到新上下文，:hover、:focus-within 或伪类触发逻辑就大概率失效——这不是样式错乱，而是选择器根本匹配不到目标元素。
为什么 nav__item:hover .nav__submenu 这类写法注定崩坏
这种嵌套写法看似直观，实则把样式强耦合在 HTML 层级上。一旦下拉菜单被抽成独立组件、或父级加了 wrapper、或 JS 动态插入节点，.nav__submenu 就脱离 .nav__item 的直系子树，:hover 立刻失灵。
- 正确路径是让下拉区域成为独立 block：
dropdown，它自己控制展开逻辑，不依赖外部 hover 传导 -
nav__item只负责渲染触发点（如nav__link），点击/聚焦时通过 JS 切换dropdown--open，而非靠 CSS 层级推导 - 构建后可用
grep -r "nav__item.*\." dist/快速扫出所有残留的空格选择器
dropdown__toggle 和 dropdown__menu 必须同属一个容器
BEM 要求所有 __ 元素必须包裹在声明的 block 容器内，否则语义断裂、调试无从下手。比如把 dropdown__menu 放到 <body> 底层，再用 position: absolute 定位，这没问题；但若它散落在 nav__item 内部、又没包在 dropdown 里，就违反了 block 边界。
- HTML 必须是：
<div class="dropdown"><button class="dropdown__toggle"></button><div class="dropdown__menu"></div></div> - 禁止：
<li class="nav__item"><button class="dropdown__toggle"></button><div class="dropdown__menu"></div></li>—— 这里dropdown__menu没归属，dropdownblock 未声明 - DevTools → Computed → Styles 面板里若看到
dropdown__menu类名但找不到对应dropdown父容器，就是典型破功
修饰符 --open 必须绑定到 dropdown，不能只挂 dropdown__menu
状态属于整个组件，不是某个子元素。只给 dropdown__menu--open 加显隐，会导致 JS 控制时需同时操作两个类名，且无法统一响应键盘导航（如 Escape 关闭应作用于 block 整体）。
立即学习“前端免费学习笔记（深入）”；
- 合法：
<div class="dropdown dropdown--open">，所有交互和动画都基于这个状态 - 非法：
<div class="dropdown"><div class="dropdown__menu dropdown__menu--open">——--open修饰符脱离主体，后续加--loading或--disabled会失控 - 多个修饰符可共存：
dropdown--open--disabled是反模式；应写成dropdown--open dropdown--disabled，每个修饰符独立、可叠加、可单独覆盖
最常被忽略的一点：BEM 不是写完类名就结束，而是要求每个 __ 和 -- 都能在 HTML 中找到明确的容器锚点。下拉菜单这类强交互组件，一旦块边界模糊，后续加无障碍支持、键盘导航、SSR 渲染或微前端隔离，都会变成硬伤。
