动画修饰符必须以--开头并绑定到块级元素，如.modal--fading-out；错误命名如.modal-fade-out或.is-fading会导致工具链无法识别、选择器失效；修饰符需挂载在承载动画的元素上，显式声明animation或transition，严格匹配@keyframes名称与生命周期事件处理。
动画修饰符必须用双连字符--开头，且绑定到块级元素
工具链（Stylelint、PostCSS 插件、VS Code 类名跳转）只识别 -- 开头的类为状态类。写成 .modal-fade-in 或 .modalFadeIn 会被解析为新 Block，脱离 modal 上下文，CSS 选择器直接失效。
常见错误：给 .modal__content 加了 .is-fading 类，但 CSS 里没定义 .is-fading .modal__content —— 因为 .is-fading 不是 BEM 修饰符，工具不识别，开发者也难定位来源。
- 正确命名：
.modal--fading-out、.carousel--sliding - 错误命名：
.modal-fade-out、.carouselSliding、.is-fading - 修饰符必须挂载在能承载动画的元素上：若
transform在.carousel__track，那--sliding就得加在它身上，而不是父级.carousel
animation 属性必须显式写在修饰符规则里，不能靠继承
只加 .card--fade-in 类，却不写 .card--fade-in .card__body { animation: card-fade-in 0.4s ease; }，等于没写。BEM 不自动注入样式，修饰符本身不带行为。
过渡动画同理：.button--hovered 必须配合 transition 声明，但注意——transition 要写在基础块类（如 .button）里，而修饰符只负责改值（如 transform: scale(1.05)），否则切换时没有过渡过程。
- 入场动画：修饰符中写
animation，并确保@keyframes名语义对齐（@keyframes card-fade-in→.card--fade-in） - 退出动画：单独定义
.card--fade-out，不能复用--fade-in反向播放——浏览器不保证 reverse 行为可预测 - 禁用
* { transition: all .2s }：它会让margin、color等非预期属性也动，且无法用will-change优化
JS 添加/移除修饰符时，必须匹配动画生命周期
类名加完立刻移除，动画根本播不完；监听 animationend 却没过滤 event.animationName，可能误删其他动画的类。关键不是“怎么加”，而是“什么时候加、什么时候收”。
- 入场动画：用
element.classList.add('card--fade-in')，等animationend事件再清理，且检查event.animationName === 'card-fade-in' - 退出动画：先加退出类（
card--fade-out），再移除入场类（card--fade-in），确保 CSS 能触发退出过渡 - 竞态处理：同一元素多个动画切换时，用
getAnimations().forEach(a => a.cancel())主动中断旧动画 - 避免用
dataset驱动（如data-state="fading"）：CSS 无法直接匹配，还得额外写 JS 绑定，破坏声明式逻辑
多个动画状态共存时，修饰符不能叠加互斥
.carousel--playing--paused 是非法且无意义的。BEM 修饰符不是布尔开关集合，而是对「当前有效行为模式」的声明。一个块同一时刻只能处于一种主导状态。
- 主状态用单一修饰符：
.carousel--playing、.carousel--paused、.carousel--loading - 次要状态用独立工具类或
data-属性承载，例如data-carousel-pause-reason="user"，CSS 不参与 - 视觉叠加需求（如加载中 + 暂停）改用元素级修饰符：
.carousel__overlay--loading和.carousel__control--paused分开控制 - 禁止跨 Block 复用修饰符名：
.button--fading-out和.modal--fading-out必须各自定义动画规则，不能共享一套 CSS
动画的触发点、取消逻辑、事件过滤，都得跟着修饰符与组件的语义绑定走。挪个类名到别的块上，就断了这个链路——不是换个名字就能复用的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
