合法的是 loading--spinner 和 loading--skeleton，前提是 loading 是已定义的独立块，且 css 中存在对应选择器 .loading--spinner 和 .loading--skeleton；命名需严格遵循 bem 规范，修饰符须依附于块，不可脱离 .loading 单独使用。
loading--spinner 和 loading--skeleton 哪个命名合法
合法的是 loading--spinner 和 loading--skeleton，前提是 loading 是一个已定义的块（block）名，且这两个类在 CSS 中有对应的选择器：.loading--spinner、.loading--skeleton。
常见错误是把 loading 当成通用工具前缀乱用，比如给按钮加 loading--spinner 却没声明 .loading 块，结果样式不生效——浏览器只认选择器，不认“听起来像加载”的名字。
-
loading必须是独立可复用的组件块，例如一个封装了状态逻辑和动画的加载占位容器 - 不能写成
btn--loading-spinner这种跨块修饰符，它混淆了按钮块和加载块的职责 - 如果加载态依附于具体组件（如
user-card），应使用user-card--loading，而非硬塞loading--xxx
animation-name 怎么和 BEM 类名对齐
直接绑定，不绕路。animation-name 的值必须和 @keyframes 名称完全一致，而这个名称最好就叫 loading-spinner 或 loading-skeleton，和 BEM 修饰符同名。
这样 JS 控制时逻辑最直：添加类 loading--spinner → 触发 animation-name: loading-spinner → 动画播放。不用额外映射或拼字符串。
- 避免
@keyframes spin+loading--spinner这种错位，容易漏改一处导致动画静默 - 多个动画共存时（如 skeleton + fade-in），用逗号分隔：
animation-name: loading-skeleton, fade-in，但需确保每个都定义且无名冲突 - 别用数字开头的动画名，如
@keyframes 2x-spin—— CSS 标准禁止 IDENT 以数字开头，animation-name会解析失败
为什么 loading--fetching 不推荐作修饰符名
因为 --fetching 描述的是过程，不是视觉形态；BEM 修饰符必须对应可感知、可复用的 UI 表现，而不是后台状态。
用户看不到 “正在 fetch”，他看到的是旋转图标、骨架屏、模糊渐显——这些才是修饰符该表达的。把业务逻辑（fetching / error / success）混进类名，会导致 CSS 膨胀、JS 判断冗余、测试难覆盖。
- 正确做法：用
loading--spinner控制动画表现，JS 在 fetch 开始时加它，结束时移除 - 错误链路：fetching → 加
loading--fetching→ 再靠 JS 监听这个类去触发动画 → 多一层间接，且无法被纯 CSS 驱动 - 若需区分阶段，用中性状态类，如
is-loading（非 BEM，仅作 JS 钩子），配合loading--spinner共同控制
动态插入 loading 元素时 classList.add() 容易漏什么
最容易漏的是块名本身。只加 loading--spinner，却忘了加 loading 这个基础块类，导致所有依赖 .loading 的通用样式（如 display、position、size）失效。
BEM 是层级结构，不是标签堆砌。修饰符必须依附于块或元素，否则就是孤儿类名——CSS 里没 .loading 基础规则，.loading--spinner 就只是个空壳。
- 安全写法：
el.classList.add('loading', 'loading--spinner') - 更稳妥：用常量统一管理块名，比如
const LOADING_BLOCK = 'loading'，避免硬编码散落 - 禁用
el.className = 'loading--spinner'这种覆盖式赋值，会清掉其他必要类（如布局类、主题类）
loading--spinner 能稳定用三年，前提是它只承诺一件事：显示旋转图标。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
