动画类名必须绑定具体Block或Element，如card--fade-in；禁止无归属类名、跨块组合、模糊词和具体值命名；CSS需严格匹配animation/transition声明，多动画用逗号分隔并独立定义。
动画类名必须绑定具体 Block 或 Element，不能脱离上下文存在
写 animate-fade 或 slide-in 这类无归属的类名，等于把动画当全局函数用——它不说明“谁在淡入”“在哪滑入”，JS 添加时容易错挂到父容器或无关节点上，CSS 也难定位作用域。
正确做法是让动画修饰符依附于明确组件：card--fade-in、modal__overlay--visible、button__icon--spin。这些名字自带归属信息，删掉 card 或 modal 就失去意义，不会被误复用。
-
card--fade-in表示「卡片块」的入场动效，CSS 中必须定义.card--fade-in选择器，且只影响该块 -
modal__overlay--visible是元素级修饰符，表示「模态框的遮罩层」可见态，不能写成overlay--visible（overlay不是已定义 Block） - 禁止跨块组合，如
user-card__avatar--loading-spin是错的——loading-spin应属于按钮或操作区域，不是头像自身的状态
修饰符必须与 animation / transition 声明严格对齐
很多动画不触发，根本原因不是 JS 没加类，而是 CSS 里漏了关键声明。BEM 类名只是开关，背后得有对应动画逻辑支撑。
比如加了 button--loading，但 CSS 只写了 .button--loading { opacity: 0.6; }，没配 transition 或 animation，那它就只是个静态样式，不是动画。
立即学习“前端免费学习笔记（深入）”；
-
button--loading必须显式声明animation: button-loading-spinner 1s infinite，且@keyframes button-loading-spinner名称要完全一致 - 避免用
transition: all .2s这种全局规则——它会让 padding、margin 等非视觉属性也过渡，干扰预期行为 - 简单 hover 缩放用
transition更轻量；复杂循环（如 loading 转圈）用animation更可控，且支持steps()等帧控能力
多个动画共存时，用逗号分隔 animation-name，但需独立定义
一个元素同时需要骨架屏 + 淡入效果，不能靠 JS 拼接两个类名去“触发不同动画”，而应在单个修饰符里声明多个动画。
例如 loading--skeleton 的实际效果可能包含占位图渐显和背景闪烁，那就直接在 CSS 中写：
.loading--skeleton {
animation-name: loading-skeleton, fade-in;
animation-duration: 1.2s, 0.4s;
}
注意两点：每个 @keyframes 必须单独存在，且名称不能以数字开头（@keyframes 2x-bounce 会解析失败）；多个动画的 timing-function 和 fill-mode 需分别设置，不能共用。
- 动画名之间用英文逗号分隔，顺序决定层叠优先级（前项在下层）
- 若某动画需暂停（如加载完成时停掉 spinner），应单独控制其
animation-play-state，而不是删整个类 - 慎用
animation-fill-mode: forwards—— 它会让动画最后一帧样式固化，可能和后续状态类冲突（如button--success的颜色被覆盖）
BEM 动画修饰符禁用模糊词和具体值
animate-bounce、zoomIn、btn--width-200px 这类命名，本质是把实现细节暴露给接口，导致维护成本飙升。
“bounce” 是动效手法，不是用户能感知的状态；“200px” 是尺寸值，换设计稿就得新增类；它们都不具备语义稳定性。
- 用行为+组件组合：✅
notification--slide-up（通知组件的上滑入场），❌slideUp - 用布尔或键值型修饰符：✅
tab--enter-active、form-field--invalid，❌form-field--red-border - 避免数字开头、驼峰、下划线：
--v2-fade❌、buttonLoadingSpin❌、button_loading-spin❌，统一用小写字母+双连字符
真正难的是把设计语言翻译成稳定语义——不是“这个动效叫 fade”，而是“这个卡片正在进入视图”。名字一旦定下，就该像 API 一样不可随意变更。
