header__nav 是元素（element），其中 header 是块（block），nav 是其直属元素，不可跨上下文复用；需复用时应定义独立 block 如 nav、user-menu。
Header__nav 是块还是元素？先分清 Block 和 Element 的归属
Header__nav 中的 Header 是 Block，nav 是它的直属 Element，不是独立 Block。这意味着：Header__nav 只能表达「这个导航是 Header 的一部分」，不能承担跨上下文复用的职责。如果导航需要在 footer、弹窗或侧边栏里复用，它就应该被定义为独立 Block（比如 nav），而不是依附于 Header。
常见错误是把所有导航都塞进 Header__nav，结果一挪位置样式就失效——因为类名本身已声明“我属于 Header”，浏览器不认 DOM 位置，只认 class 字符串是否匹配。
-
Header__nav适合仅在页头出现、逻辑强绑定的导航（如品牌主导航） - 需要复用的通用导航（如用户菜单、操作工具栏）应单独建 Block：
user-menu、toolbar - 不要写
Header__nav__item——__只能出现一次，深层子元素应回归块上下文，即Header__nav-item
Header__nav-item 怎么写才不越界？Element 必须平级且直属
Header__nav-item 是合法的 BEM 元素名，但前提是它直接出现在 Header__nav 容器内，且不依赖中间层级的 DOM 结构。BEM 不允许用类名模拟嵌套路径，所以 Header__nav-item-icon 是错的——图标不是 nav-item 的子元素，而是 Header 块下的另一个 Element。
正确做法是：把图标、文字、分隔线等都视为 Header 块的平行元素，而非 nav-item 的后代。
- ✅ 正确：
Header__nav-item、Header__nav-item-text、Header__nav-item-icon - ❌ 错误：
Header__nav-item__icon（三层下划线）、Header__nav-item-icon--active（修饰符必须挂载在宿主元素上，即Header__nav-item--active） - 如果图标行为与 item 强耦合（比如 hover 时一起变色），用 JavaScript 切换
Header__nav-item--hover，再统一控制子元素样式
怎么处理多层折叠菜单？别硬撑，该拆块就拆块
当导航含二级菜单（如悬停展开子项）、三级菜单甚至面包屑式路径时，继续用 Header__nav 扛所有逻辑会导致类名爆炸、语义模糊、维护困难。BEM 明确建议：可复用的子结构应提升为独立 Block。
例如一个带下拉的导航项，内部有子菜单和箭头图标，这不是 Header__nav-item 能干净承载的。
- 把下拉菜单提取为新 Block：
dropdown-menu，其元素为dropdown-menu__item、dropdown-menu__trigger - 原
Header__nav-item只负责布局和触发逻辑，通过 JS 绑定dropdown-menu实例 - 避免
Header__nav-item-dropdown这类混合命名——它既不像 Block（没独立语义），也不像 Element（超出了 Header 块的直系范围） - 如果子菜单只在 Header 场景下使用，可用 Modifier 表达上下文：
dropdown-menu--in-header，而非强行挂前缀
为什么 Header__nav-item--active 比 .Header__nav .item.active 更可靠？
因为浏览器匹配 .Header__nav .item.active 时，要从右往左逐层回溯父级，DOM 结构一变（比如加了个 wrapper div），选择器就断了；而 Header__nav-item--active 是单类名，不依赖任何祖先节点，移过去照样生效。
更关键的是，这种写法让样式意图完全外显：谁加了这个类，谁就负责激活态，没有隐式接口、没有结构假设、没有全局污染风险。
- 修饰符必须依附于 Block 或 Element，不能孤立存在（如禁止单独用
--active） - 状态切换交由 JS 控制类名增删，CSS 只做声明，不掺杂逻辑
- 多个状态共存时，用空格分隔：
Header__nav-item Header__nav-item--active Header__nav-item--disabled
Header__nav-item--active 错加到父容器上，样式依然不生效——所以类名规范和 DOM 操作必须同步对齐。
