导航菜单激活状态不能只靠 .active 类名，因为 bem 要求语义明确、作用域隔离，直接使用 .active 会污染全局且无法区分模块；正确写法是 .nav__item--active，绑定到具体元素并遵循修饰符规范。
导航菜单激活状态为什么不能只靠 .active 类名？
因为 BEM 要求语义明确、作用域隔离，直接写 .active 会污染全局、无法区分是哪个模块的激活态。比如侧边栏和顶部导航同时有 .active，样式就容易串。BEM 的解法是把状态绑定到具体块或元素上，例如 .nav__item--active 或 .nav--mobile-active。
常见错误是写成 .nav .active —— 这违反 BEM 命名规则，也破坏了组件封装性；更糟的是用内联 style 或 JS 直接操作 className 却不遵循命名约定，导致样式不可预测。
nav__item--active 是最稳妥的激活类名写法
导航项（nav__item）是典型的可交互元素，激活属于它的修饰符（modifier），所以用双连字符 -- 表示状态变化，而不是新建一个块。
- ✅ 正确：
class="nav__item nav__item--active" - ❌ 错误：
class="nav__item active"（脱离 BEM 上下文） - ❌ 错误：
class="nav__item--is-active"（is-前缀是 SMACSS 风格，BEM 不推荐）
样式写法也得匹配：.nav__item--active 必须定义在 .nav__item 的同一作用域下，不能嵌套过深（如 .nav .nav__item--active），否则破坏 BEM 的独立性。
JS 切换激活态时，别漏掉旧状态清理
BEM 不管 JS 怎么实现，但实操中很容易只加新类、不删旧类，导致多个 nav__item--active 同时存在。尤其在手风琴式菜单或路由切换场景下，必须显式移除前一个激活项。
示例逻辑（React 场景）：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
const handleItemClick = (id) => {
setActiveId(id);
// 不要只 set state，还要确保 DOM class 同步
};
对应渲染：
关键点：
- 状态变量（如
activeId）必须唯一，且与 DOM 元素一一对应 - 如果用原生 JS 操作 class，务必用
classList.replace()或先remove()再add() - 避免用
querySelectorAll('.nav__item--active')清理 —— 容易误删其他模块的同类名，应限定父容器：navEl.querySelectorAll('.nav__item--active')
响应式导航里，nav--mobile-active 和 nav__item--active 可共存
移动端常需要整个导航块展开（nav--mobile-active），同时高亮当前项（nav__item--active）。这两个修饰符属于不同层级，互不干扰。
注意 CSS 优先级：
-
.nav--mobile-active .nav__item--active是合法组合，表示“展开状态下某一项激活” - 不要写成
.nav--mobile-active.nav__item--active（语法错误，.nav__item--active不是.nav的子类） - 若需覆盖默认样式，用更具体的选择器，比如
.nav--mobile-active .nav__item--active > a
真正容易被忽略的是：服务端渲染或初始加载时，nav--mobile-active 可能由 JS 控制，但 nav__item--active 往往来自路由匹配 —— 两者触发时机不同，得确保 class 应用顺序不影响视觉表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
