--active是bem原生修饰符，表示设计态固有活跃状态，可独立生效、支持ssr且无需js；is-active是社区状态标记，仅作js切换信号，必须绑定块名使用，不可单独定义样式，语义、时机与工具链处理均不同。
修饰符--active和is-active根本不是同一类东西
它们语义层级、使用时机、工具链处理方式全都不一样，混用等于把设计态和运行态搅在一起。--active是BEM原生语法的一部分，表示“这个实例在设计上就是活跃态”，比如服务端渲染时已知当前tab；is-active是社区自发补充的状态标记，只承担JS切换时的信号作用，本身不带设计意图。
.tab__item--active必须能脱离JS独立生效
如果你删掉所有JS，页面仍需正确显示当前选中项，那就该用--active。它直接参与CSS规则定义，例如.tab__item--active { color: #007bff; font-weight: 600; }，不需要任何JS加载就能工作。常见错误是写成.tab__item.is-active却没在CSS里覆盖所有上下文组合，结果样式漏掉或被覆盖。
- 服务端渲染（SSR）场景下，--active可静态写入HTML，PurgeCSS也能安全保留
- DevTools里一眼可见状态归属，不用点开元素再查JS执行痕迹
- JS失败时视觉不降级——用户仍知道哪个tab是当前页
is-active必须永远和块名/元素名共存，不能单独出现
.is-active单独写规则是危险操作。它没有作用域，一旦定义.is-active { display: block; }，所有带该class的元素都会强制显示，包括.tooltip.is-active和.sidebar.is-active。正确写法只能是.tab__panel.is-active、.user-card.is-loading这类绑定到具体Block的组合。
- PurgeCSS等工具靠HTML或JS中真实出现的组合来判断是否保留样式，单写
.is-active容易被误删 - 屏幕阅读器不认
is-active，需要配套aria-current="page"或aria-selected="true" - 用
classList.toggle('is-active')时，必须确保CSS里有对应组合规则，否则切换无效
动画类只能用--开头，is-fading这种命名会断掉工具链
像.modal--fading-out是合法BEM动画修饰符，而.is-fading或.modal-fade-out都不行。前者不被Stylelint、PostCSS插件识别为修饰符，IDE跳转失效；后者会被解析成新Block，脱离modal上下文，导致选择器失效。
- 动画修饰符必须显式声明
animation或transition，只加class不写CSS属性=没动画 - 禁止
--loading--disabled这种链式修饰符，多个状态应平级添加：class="button--loading button--disabled" -
* { transition: all .2s }会干扰动画控制，且阻断will-change优化
真正难的是在组件设计初期就分清：哪些状态是「设计固有变体」，哪些是「运行时临时信号」。一旦混淆，后续调试、工具链处理、无障碍支持全都会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
