BEM修饰符必须绑定组件语义、区分形状与节奏，采用“行为+节奏”组合命名（如loader--spinning-fast），禁止孤立使用--fast/--slow等模糊词，确保CSS显式定义、JS准确添加、多形态间无污染。
加载动画的BEM修饰符必须绑定组件语义、区分形状与节奏，不能只靠--fast或--small这类孤立描述。否则会导致类名复用混乱、CSS选择器冲突、JS控制失焦——比如.button--loading--fast在另一个模块里被误用于弹窗遮罩，结果遮罩也变快了，但逻辑上它该等数据返回才结束。
为什么--fast/--slow不能单独作为修饰符
速度不是独立状态，而是依附于具体动画行为的参数。直接写.loader--fast会掩盖「这个快是旋转快？缩放快？还是淡入快？」的真实意图。
- 同一组件内可能有多个动画层：比如
.spinner__ring转得快，.spinner__dot跳得慢，二者不能共用一个--fast - CSS中无法对
--fast做语义化继承：你没法写.loader--fast .spinner__ring { animation-duration: 0.2s; }再让.loader--slow自动覆盖为0.6s，因为BEM不支持修饰符级联推导 - JS添加类时容易漏掉主修饰符：
el.classList.add('loader--fast')却忘了加loader--spinning，结果只有速度没动画
正确做法：用「行为+节奏」组合修饰符
把动画类型（行为）和节奏（速度/尺寸）打包成一个完整语义单元，例如loader--spinning-fast、dots--bouncing-slow。
- 行为部分明确动画本质：
--spinning、--bouncing、--pulsing、--filling - 节奏部分限定范围：
-fast（≤0.3s）、-medium（0.4–0.7s）、-slow（≥0.8s），避免用-xslow这种模糊词 - 形状变化需显式声明：
ring--thick比ring--big更准确，因为border-width才是实际控制项；dot--tiny对应width: 4px; height: 4px，而非凭感觉 - 所有组合修饰符必须在CSS中显式定义，不能靠JS拼接：
.loader--spinning-fast要真有对应规则，而不是靠.loader--spinning+.loader--fast叠加生效
多形态加载器共存时的命名避坑点
当页面同时存在环形加载器、三点弹跳、进度条三种类型，修饰符必须隔离到各自块级作用域，否则--fast会互相污染。
立即学习“前端免费学习笔记（深入）”；
- 环形：用
spinner--rotating-medium，不写spinner--fast——因为“旋转”才是它的核心行为，“快”只是其中一档节奏 - 弹跳点：用
dots--bouncing-slow，不写dots--slow——避免和未来可能加的dots--fading-slow混淆 - 进度条：用
progress--filling-fast，不写progress--fast——防止和progress--expanding-fast（宽度增长动画）冲突 - 禁止跨块复用节奏词：
button--loading-fast和spinner--rotating-fast里的-fast可以时长一致，但不能共享同一套CSS规则，必须各自定义
真正难的不是起名，而是守住「每个修饰符只表达一种可感知的行为节奏组合」这条线。一旦开始用--v2、--alt、--new这类无意义后缀，就说明设计边界已经模糊了。
