不能写 .is-active 全局规则，因为浏览器只匹配类名字符串而不识别语义，导致所有含 is-active 的元素被统一样式覆盖；正确做法是状态类必须绑定到具体块或元素，如 .btn.is-active，以隔离作用域并确保构建工具能正确识别。
为什么不能写 .is-active 全局规则
浏览器不认语义，只匹配类名字符串。一旦定义了 .is-active { opacity: 0.5; }，所有带 is-active 的元素——无论它是 .modal、.tooltip 还是 .nav-link——都会被统一降透明度。BEM 修饰符（如 --primary、--compact）本该各自定义完整视觉状态，但全局 .is-active 把样式职责抢走了，导致 .btn--primary.is-active 和 .btn--secondary.is-active 看起来一模一样，违背设计意图。
正确写法：状态类必须绑定到块或元素上
状态不是独立样式单元，它必须有明确归属。CSS 规则里禁止出现孤立的 .is-active，只允许以下形式：
-
.btn.is-active—— 块级状态 -
.tab__item.is-active—— 元素级状态 -
.user-card__avatar.is-loading—— 子元素专属状态
这样既隔离作用域，也确保 PurgeCSS 能扫描到真实组合（如 HTML 中存在 <div class="tab__item is-active">），不会误删。
<h3>JS 切换 <code>is-active 时容易漏掉什么
常见错误是只调用 el.classList.toggle('is-active')，却没确认基础 BEM 类是否就位。比如服务端没渲染 .btn--primary，客户端 JS 却直接加 is-active，结果样式无响应——因为 CSS 规则写的是 .btn--primary.is-active，而非 .btn.is-active。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 切换前先确保块/元素类存在：
el.className = 'btn btn--primary' + (isActive ? ' is-active' : '') - 判断状态别只靠
el.classList.contains('is-active')，改用el.matches('.btn--primary.is-active')或读取数据源 - 禁用态等需同步属性的场景，
.btn--disabled必须配disabled属性，不能只靠 class
要不要用 --active 替代 is-active？
该用 --active 的情况很明确：服务端已知当前项（如路由匹配）、设计稿明确定义了“活跃态”视觉变体、且不需要 JS 运行时控制。例如 .nav__link--active 可静态存在，CSS 独立生效，PurgeCSS 安全保留，JS 失败也不影响视觉。
is-active 不是替代品，而是补充信号：它不负责样式，只用于 JS 查询、A11y 同步（如自动加 aria-selected="true"）、或外部模块判断条件。两者可以共存，但分工必须切清：--active 管 UI 表现，is-active 管运行时状态信号。
