必须使用 --current 修饰符且挂靠在具体 block 上，因其语义对应 aria-current="page"，精准表达滚动定位的当前项，避免与交互态混淆，并确保 css、js、可访问性三者统一。
锚点导航当前高亮项必须用 --current 修饰符，且只能挂靠在明确的 block 上（如 nav 或 toc），不能写成 nav__item--active 或 .active 这类无归属的类名。
为什么必须是 --current 而不是 --active 或 --selected
“当前”是语义锚点导航的核心状态：它表示「此刻浏览器滚动位置所对应的导航项」，由 JS 根据 IntersectionObserver 或 getBoundingClientRect() 动态判定，和用户点击、焦点、表单选中等交互状态无关。--active 易与按钮激活态、Tab 面板激活态混淆；--selected 常用于多选控件。一旦混用，CSS 层叠、JS 状态管理、可访问性（aria-current="page"）三者就无法对齐。
常见错误现象：
• 页面滚动时高亮错位，但检查发现 nav__item--active 被其他组件（如侧边栏菜单）复用并残留
• aria-current 属性值为 "page"，但样式类却是 --selected，屏幕阅读器与视觉不一致
-
--current是 WAI-ARIA 官方推荐的语义匹配修饰符，与aria-current="page"直接对应 - 所有基于滚动定位的导航（顶部导航、目录 TOC、页内跳转锚点条）都应统一使用该修饰符
- 禁止在同一个项目中出现
--current/--active/--highlighted多套并存
nav__item--current 的 block 必须具体，不能是泛义 nav
直接写 nav__item--current 是错的——nav 不是一个可独立复用的 block，它没有上下文约束力。实际项目中至少存在：顶部主导航（header-nav）、文档目录（toc）、页脚快速跳转（footer-jump），它们的高亮逻辑、动效、z-index 都不同。
正确做法：
• 文档目录高亮 → toc__item--current
• 顶部导航高亮 → header-nav__item--current
• 页脚跳转高亮 → footer-jump__link--current
- block 名必须反映具体用途，不能是通用标签名（
nav、ul）或布局描述（horizontal-menu） - 若项目已有命名空间（如
app-），则前缀不可省略：app-toc__item--current - 同一页面多个锚点导航时，block 名差异必须足够区分语义，而非仅靠序号：
toc和mini-toc比toc-1/toc-2更可持续
JS 控制 --current 类名时的关键限制
动态添加/移除 --current 修饰符看似简单，但最容易破坏 BEM 结构完整性。核心原则：只操作已声明的 block 下的合法 element，不拼接、不推导、不跨层。
错误写法示例：
• el.classList.add(`${block}__item--current`) —— 若 block 来自 props 且含空格或非法字符，生成类名无效
• navItem.parentElement.querySelector('.nav__item--current') —— 依赖父级 class 名，违反 block 封装性
• 给 nav__link 加 --current，但实际高亮需作用于 nav__item 容器（影响 padding/hover 区域）
- 所有 block、element 字符串必须硬编码，例如
const BLOCK = 'toc'; const ITEM = `${BLOCK}__item`; - 高亮目标元素必须与 CSS 中定义的 selector 严格一致：
.toc__item--current 对应 <code>toc__item元素，而非其子toc__link - 避免用
document.querySelectorAll('.toc__item')后再遍历判断 offset，改用IntersectionObserver+rootMargin更精准，也更易与--current语义对齐
响应式与动效中 --current 的边界处理
--current 描述的是状态，不是断点或动效开关。移动端折叠导航、悬停展开二级菜单等场景，不能靠 --current 控制显隐，而应另用 --expanded、--mobile-open 等专用 modifier。
常见踩坑：
• 在媒体查询里写 @media (max-width: 768px) { .toc__item--current { display: block; } } —— 错，--current 不负责控制显示/隐藏
• 给 --current 加 transform: scale(1.05) 后，又在 :hover 里加同样动效，导致状态叠加混乱
-
--current只管「哪个是当前项」，样式表现（颜色、背景、边框、图标变化）由它单独定义，不耦合其他行为 - 动效应通过独立 class（如
toc__item--current-animated）或 CSStransition属性控制，避免把状态和动效绑死 - 移动端需要特殊高亮样式时，用
@media覆盖.toc__item--current的部分属性，而不是新增--current-mobile
真正难的不是写对 toc__item--current，而是确保整个项目里所有滚动定位逻辑都只往这一个语义接口上打——只要有一个地方偷偷用了 --active 或漏了 block 前缀，后续排查高亮失效就得翻遍 JS、HTML、CSS 三层代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
