动画类名必须是--modifier，如.modal--fade-in，不可独立为.fade-in；须与css动画声明严格对齐，禁止嵌套修饰符，命名应语义化表达意图而非视觉参数。
动画类名必须是 --modifier，不能是独立 Block 或 Element
直接把动画名（如 fade-in、slide-up）当作 Block 名写成 .fade-in 或 .slide-up，会导致语义断裂和复用失效。BEM 要求动画必须绑定到具体组件上下文，比如 .modal--fade-in 表示“模态框处于淡入状态”，而不是“一个叫 fade-in 的通用动效”。否则工具链无法识别其归属，CSS 选择器权重失控，JS 控制时机也失去锚点。
常见错误现象：
- 全局定义
.slide-up { animation: slide-up 0.3s ease; }，结果在.card和.toast里都加这个类，但两者位移起点、缓动曲线本应不同 - 写成
.card__content--slide-up却没在 CSS 中声明animation或transition，只靠 JS 切类，动画不触发
--modifier 必须与 CSS 的 animation/transition 声明严格对齐
仅添加类名不等于启用动画。每个 --modifier 必须在 CSS 中显式配对声明，且属性不可省略或继承。例如 .button--loading 若只写了 transform: scale(0.9)，漏了 transition: transform 0.2s ease，就看不到过渡效果。
实操建议：
- 禁止使用
* { transition: all .2s }—— 它会让color、margin等非预期属性也过渡，且阻断will-change优化 - 每个动画修饰符单独声明完整规则：
.modal--fade-in { animation: fade-in 0.25s ease-out forwards; } - 避免用
animation-name直接暴露 CSS 动画名（如fade-in），应封装在修饰符中，让 JS 只操作类名，不关心底层 keyframes
多个动画状态叠加时，Modifier 必须平级组合，不可嵌套或连写
BEM 不允许 --loading--disabled 或 --fade-in--scale 这种链式修饰符。它们不是父子关系，而是布尔开关，应并列存在：modal--fade-in modal--scale。这样既支持任意组合，也便于 JS 动态增删。
容易踩的坑：
- 用字符串拼接生成
class="modal--fade-in--scale"→ 解析器会把它当做一个新 Block，破坏 BEM 工具链识别 - 在 SCSS 中写
&--fade-in--scale→ 编译后仍是单个类名，语义丢失，且无法被 Stylelint 插件校验 - 期望通过
--fade-in自动触发--scale→ 违反 Modifier “可开关”原则，状态耦合，调试困难
动画 Modifier 的命名要表达意图，而非视觉结果
写 --fade-200ms 或 --slide-left-40px 是典型反模式。这类名称绑定具体数值，换主题、适配移动端或做 A/B 测试时，必须全局搜索替换，且无法推断业务含义。
正确做法是用语义化词描述状态意图：
-
--entering（进入视图）对应淡入 + 缩放，PC 端用fade-in，移动端可切为slide-up -
--exiting（退出流程）可映射到fade-out或shrink-out，由 CSS 自定义属性控制具体表现 - 所有动画值统一抽到 CSS 变量：
.modal--entering { --anim-duration: 0.25s; --anim-easing: ease-out; }，基础类中引用animation-duration: var(--anim-duration)
真正难处理的是跨组件动画协同——比如 modal--entering 触发时，内部 modal__content 要延迟启动自己的 --stagger-in。这要求 Modifier 不仅要命名规范，还得在 JS 控制层保持时序契约，而 BEM 类名本身只是这个契约的可读标签。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
