动画类名必须是--modifier且绑定具体Block或Element，如.modal--fade-in；.fade-in是孤立全局类，无组件绑定、CSS不生效、工具链报错、样式易冲突。
动画类名必须是 --modifier，且必须绑定到具体 Block 或 Element 上，否则 CSS 不生效、JS 控制失锚、工具链识别失败。
为什么 .fade-in 不能直接用
它不是 BEM 修饰符，而是孤立的全局类。浏览器不会知道它属于哪个组件，.modal__content 和 .card__image 都加了 .fade-in，样式却可能互相覆盖或错位。Stylelint 等工具会把它识别为新 Block，校验报错；IDE 也无法跳转到定义位置。真正有效的写法是 .modal--fade-in 或 .card__image--loading——语义明确：谁在动、处于什么状态。
--modifier 必须显式声明 transition 或 animation
只加类名不写过渡规则，等于没写。常见错误包括：
- 写了
.button--hovered，但 CSS 中只定义了transform: scale(1.05)，漏了transition: transform 0.2s ease - 把
transition写在修饰符里（如.button--hovered { transition: ... }），结果覆盖了基础类中已有的transition，导致其他属性（如background-color）失去过渡 - 依赖
* { transition: all .2s }，引发非预期属性动画、阻断will-change优化、性能下降
正确做法：.button 基础类统一声明 transition，修饰符只负责变更值；动画则必须在修饰符规则内完整写出 animation 和对应 @keyframes 名称。
多个动画状态如何共存而不冲突
BEM 不允许嵌套修饰符，比如 .modal--fade-in--scale 是非法的。多个状态应平级添加：
- HTML 中写成
class="modal modal--fade-in modal--scale" - CSS 分别定义
.modal--fade-in和.modal--scale，各自控制不同属性 - JS 控制时独立切换：
el.classList.toggle('modal--fade-in')和el.classList.toggle('modal--scale') - 入场/退出需分步：先加
modal--fade-out，监听animationend且过滤event.animationName === 'modal-fade-out'，再移除modal--fade-in
同一元素频繁切换时，务必先调用 el.getAnimations().forEach(a => a.cancel()) 清理旧动画，否则竞态会导致行为不可预测。
最容易被忽略的是：修饰符语义必须和承载元素强绑定。把 .card--fade-in 加到 .modal 上，CSS 规则就失效；JS 监听 animationend 时若不校验 animationName，也可能误删其他动画；硬件加速是否生效（比如是否用了 transform）、事件能否触发，全都依赖这个绑定关系成立。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
