90%的情况该用块级修饰符，如.carousel--playing或.modal--open，因动画启停是组件整体行为；例外仅限子元素需独立控制动画的场景。
动画触发态该用块级修饰符还是元素级修饰符
直接结论：90% 的情况该用块级修饰符，比如 .carousel--playing 或 .modal--open，而不是 .carousel__track--playing。因为动画的「启动/暂停/重置」是组件整体行为，不是某个子元素的独立状态。若把修饰符挂到 __track 上，会导致 JS 控制逻辑分散、CSS 过渡作用域错位（例如 transform 在 __track，但 opacity 在 __overlay），最终动画不同步。
例外场景只有两个：
• 某个元素需单独启停动画（如 loading 图标旋转），此时用 .button__icon--spinning
• 多阶段动画中某环节需独立控制（如轮播指示器淡入后缩放），可用 .carousel__indicator--entered 配合 JS 分步添加
如何避免动画类名与BEM修饰符冲突
常见错误是把动画关键帧名和 BEM 类名混用，比如定义 @keyframes slideIn，又写 .carousel__track--slideIn。这会造成语义混淆：前者是时间轴描述，后者是状态标识，二者职责完全不同。
正确做法是严格分离：
• 动画名称用动宾结构、小写+连字符：@keyframes carousel-slide-in、@keyframes modal-fade-out
• BEM 修饰符只表达“是否处于该动画流程中”，如 .carousel--sliding、.modal--fading-out
• CSS 中用 animation 属性绑定，不把动画名塞进类名里：.carousel--sliding .carousel__track { animation: carousel-slide-in 0.3s ease; }
注意：不要在修饰符类中写 animation: none 来“关闭”动画——那会覆盖所有继承的动画规则。应统一用 .carousel--idle .carousel__track { animation-play-state: paused; }
多个动画状态共存时的修饰符组合逻辑
当一个组件同时有「播放中」「暂停中」「加载中」「错误态」等状态时，不能靠叠加修饰符来表达互斥关系，比如 .carousel--playing--paused 是非法且无意义的。
实操建议：
• 用单一主导修饰符表示当前主状态：.carousel--playing、.carousel--paused、.carousel--loading
• 次要状态用独立工具类或 data 属性承载，例如 data-carousel-pause-reason="user" 供 JS 判断，CSS 不参与
• 若需视觉叠加（如加载中 + 暂停），改用元素级修饰符：.carousel__overlay--loading 和 .carousel__control--paused 分开控制不同区域
关键点：BEM 修饰符不是布尔开关集合，而是对「当前有效行为模式」的声明。一个块同一时间只应有一个主导修饰符。
transition 和 animation 共存时，修饰符命名怎么避坑
很多轮播或弹窗组件既用 transition 做 hover 反馈，又用 animation 做进入退出。这时若都用 --active 修饰符，就会导致样式意图模糊。
区分原则：
• --hovered、--focused 等仅用于 transition 场景，且必须配合伪类使用：.button__icon--hovered:hover { transform: scale(1.2); }
• --entering、--leaving、--idle 等专用于 animation 流程，由 JS 显式切换，不依赖用户交互事件
• 禁止出现 .button--hovered--entering 这类混合修饰符——它既无法被 JS 合理维护，也违背了 BEM 的单职责原则
容易被忽略的是：transition 的属性必须和 animation 的属性错开。例如 .carousel__track 用 transform 做位移动画，就别再给它加 transition: transform，否则鼠标悬停时会抢断动画流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
