导航栏BEM命名应以nav为块，子元素用nav__前缀；下拉菜单独立为dropdown块；状态类仅修饰具体元素；CSS按功能拆分为nav.css、nav-dropdown.css和_nav-theme.css。
导航栏结构怎么用BEM命名才不混乱
直接按“块-元素-修饰符”三层拆，但很多人卡在“哪些该算块、哪些只是元素”。导航栏（nav）本身是块，但它的子菜单（下拉项）、当前激活态、禁用项这些不能全塞进一个 nav__item 里硬扛。
-
nav是顶层块，所有直接子元素用nav__前缀，比如nav__list、nav__link - 下拉菜单是独立交互单元，应另起一个块：
dropdown，而不是nav__dropdown；它内部的触发按钮和面板就用dropdown__toggle、dropdown__menu - 状态类只修饰具体元素，如
nav__link--active或dropdown__toggle--disabled，不写nav--active这种模糊修饰 - 避免嵌套过深：不用
nav__list__item__link，而是nav__item→nav__link，保持扁平
CSS文件怎么拆才能真复用
模块化不是光靠命名，关键是文件组织得让别人一眼看出“这个样式管哪块、能不能单独抽走”。把导航相关样式从全局 base.css 里拎出来，按功能切片。
- 主结构：
nav.css—— 只含nav、nav__list、nav__item等容器和布局规则，不含颜色、字体等皮肤层 - 交互增强：
nav-dropdown.css—— 仅当项目用到下拉时才引入，里面只定义dropdown块及其动画、z-index、过渡属性 - 主题变量单独抽成
_nav-theme.css，用 CSS 自定义属性（--nav-bg、--nav-link-color），方便换肤不改结构 - 别在
nav.css里写媒体查询适配移动端，统一交给layout-responsive.css管理，否则模块职责就乱了
为什么子菜单 hover 不生效或闪退
这是 BEM 结构下最常踩的 CSS 层级陷阱：父块样式意外覆盖子块，或者 :hover 范围太窄导致鼠标移出触发区域就关闭。
- 确保
dropdown__menu和dropdown__toggle在 DOM 中相邻或包裹关系合理，不要隔着无关节点，否则dropdown__toggle:hover + .dropdown__menu会失效 - 给
dropdown__menu设最小宽度（min-width: max-content），避免内容收缩导致鼠标悬停断开 - 加一点
transition-delay（如0.1s）在dropdown__menu的opacity或transform上，缓解“闪退”感 - JavaScript 控制显隐时，别直接删
dropdown__menu元素，用display: none或visibility: hidden切换，否则 BEM 类名还在但结构已断
如何让导航组件在 Vue/React 里真正解耦
BEM 是 CSS 方法论，但组件框架里容易把它变成“CSS 写法+JS 拼接 class 字符串”，结果样式还是和逻辑强耦合。
立即学习“前端免费学习笔记（深入）”；
- Vue 中用
:class绑定对象，而不是拼"nav__item " + (isActive ? "nav__item--active" : "")；推荐用classnames库或原生对象语法：{ "nav__item": true, "nav__item--active": isActive } - React 函数组件里，把
dropdown抽成独立组件，props 只传isOpen、onToggle，内部不感知父级是nav还是header - 禁止在组件内写
.nav .dropdown__menu这种跨块选择器，BEM 失效的起点就是这种“越界”写法 - 如果要用 CSS-in-JS（如 styled-components），仍需遵守 BEM 命名，比如
const DropdownMenu = styled.div.attrs({ className: 'dropdown__menu' })
