动画修饰符必须以--开头并在css中显式声明transition或animation，否则无效；--是bem工具链识别状态类的唯一标识，避免用-或驼峰；每个修饰符需配对完整过渡声明，不可依赖继承或all。
直接结论：动画修饰符必须用 -- 开头，且每个 --xxx 类名必须在 CSS 中显式声明对应的 transition 或 animation，否则只是个空壳类，JS 切了也白切。
为什么 -- 修饰符不能写成 - 或驼峰
BEM 工具链（比如 Stylelint、PostCSS 插件）靠双连字符 -- 唯一识别状态类。写成 .modal-fade-in 或 .modalFadeIn，工具会把它当成一个新 Block 名，而不是 modal 块的某种状态——结果就是自动检查过不了，IDE 跳转失效，团队协作时别人改了你的类名自己都不知道。
实际影响包括：
-
.card--hover-scale✅ 可被stylelint-selector-bem-pattern校验为合法修饰符 -
.card-hover-scale❌ 被识别为独立 Block，和card完全无关 -
.cardHoverScale❌ CSS 选择器不支持驼峰，浏览器直接忽略该规则
transition 必须和修饰符严格配对，不能靠继承或全局规则
常见错误是只加了类名，但没在 CSS 里写 transition 属性。比如写了 .button--loading-spin，CSS 却只定义了 transform: rotate(360deg)，漏了 transition: transform 0.4s ease-in-out——结果 JS 加了类，按钮纹丝不动，开发者回头去查事件绑定逻辑，白白浪费时间。
正确做法是每个修饰符都带完整过渡声明：
.button--loading-spin {
animation: spin 1s linear infinite;
}
.button--disabled {
opacity: 0.5;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
注意：
- 别用
* { transition: all .2s }，它会让margin、color等非预期属性也动，还无法用will-change优化 - 简单交互（如 hover 缩放、禁用态淡出）优先用
transition；复杂循环（如 loading 图标旋转）才用animation - 需要硬件加速时，只对
transform和opacity做过渡，避免left/top触发重排
修饰符命名要描述「状态」，不是「触发方式」
card--elevated 比 card--hover 更合理，因为前者表达“当前卡片处于抬升状态”，后者只说“是靠 hover 触发的”——可访问性场景下键盘焦点也要抬升，伪类 :hover 就覆盖不到。
实操建议：
- 用视觉/行为关键词：
--expanded、--focused、--fading-out，不用业务词：--pending、--failed - 一个修饰符必须能独立存在：删掉它，UI 应立刻回退到默认态，不依赖其他类或 JS 状态
- 多个状态共存时，不要堆叠修饰符（如
.modal--open--loading），而是分区域控制：.modal--open+.modal__overlay--loading
Transition 写在修饰符里，还是基础类里？
必须写在修饰符类中。比如全屏遮罩层，有人把 transition: opacity 0.3s 写在 .overlay 基础类里，再用 .overlay--visible 控制 opacity ——这会导致隐藏时无过渡（display: none 会跳过 transition），而且一旦基础类被复用，所有用到它的元素都带过渡，不可控。
正确结构是：
.overlay {
opacity: 0;
visibility: hidden;
}
.overlay--visible {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
关键点：
- 用
visibility + opacity组合替代display: none，否则 transition 失效 -
transition必须出现在状态变化的类（即修饰符）里，不能指望基础类“兜底” - 如果过渡涉及多个属性，务必在
transition-property中明确列出，避免all引发意外动画
最常被忽略的是：修饰符类名和 CSS 声明之间必须一一对应，不能靠“大概应该有”来赌。写完类名，立刻补上对应的 transition 或 animation，否则这个类在 DOM 里就只是个装饰品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
