在CSS中BEM命名规范如何处理全局状态is-active？-css教程-PHP中文网

不能写 .is-active 全局规则，因为浏览器只匹配类名字符串而不识别语义，导致所有含 is-active 的元素被统一样式覆盖；正确做法是状态类必须绑定到具体块或元素，如 .btn.is-active，以隔离作用域并确保构建工具能正确识别。

在css中bem命名规范如何处理全局状态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 中存在

），不会误删。JS 切换 is-active 时容易漏掉什么
常见错误是只调用 el.classList.toggle('is-active')，却没确认基础 BEM 类是否就位。比如服务端没渲染 .btn--primary，客户端 JS 却直接加 is-active，结果样式无响应——因为 CSS 规则写的是 .btn--primary.is-active，而非 .btn.is-active。
实操建议：

											
												
												
													CSS工具箱(专业版)
													全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
												
												下载
												
											
										

切换前先确保块/元素类存在：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 管运行时状态信号。