BEM中导航栏与下拉菜单必须拆分为独立block：nav负责结构布局（nav__list、nav__item），dropdown负责交互逻辑（dropdown__toggle、dropdown__menu），二者DOM需紧邻或直接父子，禁止nav__dropdown等跨块命名。
导航栏用 BEM 命名，关键不是“怎么写类名”，而是“哪些该拆成独立块”。把 dropdown 塞进 nav__item 里硬套命名，90% 的 hover 闪退、状态失效、样式污染都源于此。
nav 和 dropdown 必须是两个独立 block
很多人写 nav__dropdown 或 nav__submenu，这违背 BEM 的职责划分。nav 只管语义结构和布局（nav__list、nav__item、nav__link），而下拉交互逻辑（触发、面板定位、显隐过渡）属于 dropdown 自身的职责。
-
dropdown必须是完整、可复用的 block：包含dropdown__toggle和dropdown__menu，且二者在 DOM 中必须是相邻兄弟或直接父子关系 -
nav__item内部只负责容纳一个dropdown实例，不掺杂任何dropdown__相关样式规则 - 多级菜单时，子级下拉仍是独立
dropdown，不是nav__item__dropdown或dropdown__menu__submenu—— BEM 不允许跨 block 嵌套命名
hover 闪退根本不是 CSS 写错了，是 DOM 断链了
浏览器中 .dropdown__toggle:hover + .dropdown__menu 失效，几乎全是 HTML 结构问题：Vue 的 <transition>、React 的 <Fragment>、或手写的包装 <div class="wrapper"> 插在中间，导致兄弟选择器断开。
- 确保
dropdown__toggle和dropdown__menu在 DOM 中紧邻，或dropdown__menu是dropdown__toggle的直接父/子节点（若用:has()需注意兼容性） - 给
dropdown__menu加min-width: max-content，防止内容收缩后鼠标移出热区 - 加
transition-delay: 0.1s到dropdown__menu的opacity或transform上，缓解视觉断连感 - JS 控制显隐时，用
display: none或visibility: hidden切换，别用remove()—— 否则 BEM 类还在，但结构已断裂
CSS 文件按职责拆，不是按“看起来像一块”
模块化不是起个好名字就完事，关键是文件组织让人一眼看出“这个样式管哪块、能不能单独抽走”。nav.css 里塞颜色、动画、媒体查询，等于把所有责任焊死在一起。
立即学习“前端免费学习笔记（深入）”；
-
nav.css：只含nav、nav__list、nav__item等容器与布局规则，不含皮肤层（颜色、字体）或交互层（hover、z-index） -
nav-dropdown.css：仅当项目用到下拉时才引入，只定义dropdown块及其过渡、定位、z-index -
_nav-theme.css：抽成 CSS 自定义属性（--nav-bg、--nav-link-color），换肤不改结构 - 媒体查询统一交给
layout-responsive.css管理，否则响应式逻辑会和 nav 职责耦合
最常被忽略的点：BEM 的 __ 和 -- 不是装饰，是语法分隔符。写成 nav-item 或 nav__link-active，工具链和人眼都会误判层级 —— 这不是风格问题，是解析错误的起点。
