动画修饰符必须以--开头并绑定到具体块或元素，否则类名无效、工具链失焦、js控制失锚；.modal--fade-in✅语义明确且工具链识别，.fade-in❌为全局类，.modal-fade-in❌破坏bem层级。
动画修饰符必须用--开头、绑定到具体块或元素，否则类名无效、工具链失焦、JS控制失锚。
为什么.modal--fade-in不能写成.fade-in或.modal-fade-in
工具链（Stylelint、PostCSS 插件、VS Code 类名跳转）只识别--开头的类为状态类。写成.fade-in会被当成全局类，脱离组件上下文；写成.modal-fade-in则被解析为新 Block，破坏 BEM 层级，CSS 选择器直接失效。
-
.modal--fade-in✅：明确表达「模态框当前处于淡入状态」，语义绑定、可复用、可跳转 -
.modal-fade-in❌：工具链不识别为修饰符，IDE 无法关联到.modal，样式易被覆盖 -
.is-fading❌：不是 BEM 修饰符，CSS 规则需手动写.is-fading .modal__content，维护成本高且易断链
animation和transition声明必须显式写在修饰符规则里
BEM 不自动注入行为，只提供命名契约。加了.button--loading-spin类，但 CSS 中没写animation: loading-spin 0.4s linear infinite，动画就永远不会触发。
- 入场/退出动画：修饰符中必须包含完整
animation声明，并与@keyframes名称严格对齐（如@keyframes card-fade-in↔.card--fade-in） - 交互过渡（如 hover 缩放）：
transition必须写在基础块类（如.button）中，修饰符只负责改值（如transform: scale(1.05)），否则切换无过渡 - 禁用
* { transition: all .2s }：它会让margin、color等非预期属性也动，且阻断will-change优化
JS 控制动画类名时，关键不是“加不加”，而是“何时加、何时收”
类名加完立刻移除，动画播不完；监听 animationend 却不校验 event.animationName，可能误删其他动画的类。
- 入场流程：
el.classList.add('card--fade-in')→ 监听animationend→ 检查event.animationName === 'card-fade-in'→ 再清理 - 退出流程：先
add('card--fade-out')，再remove('card--fade-in')，确保退出动画能被 CSS 正确触发 - 竞态处理：同一元素频繁切换动画状态时，用
el.getAnimations().forEach(a => a.cancel())主动中断旧动画
最易被忽略的是：修饰符语义必须和承载它的元素强绑定——.card--fade-in 的动画逻辑、硬件加速条件（是否用 transform）、取消时机，全都依赖它挂载在 .card 上这个事实。挪到 .modal 上，哪怕样式看起来一样，底层行为也已不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
