骨架屏BEM类名必须用--skeleton修饰符，如.card--skeleton、.card__title--skeleton；禁止使用-skeleton或独立.skeleton，须显式声明两层background-image渐变、伪元素动画绑定及opacity过渡移除，确保样式继承、光效定位与动画可控。
骨架屏BEM类名必须用--skeleton修饰符，不能写成-skeleton或skeleton
直接写.card-skeleton会被解析为新 Block，脱离.card上下文，导致样式无法继承 padding/margin/aspect-ratio 等布局属性；而.card--skeleton明确表示“card 处于 skeleton 状态”，工具链（如 Stylelint、PostCSS）能据此校验动画声明是否匹配。
常见错误现象：.card__avatar-skeleton → 实际应为.card__avatar--skeleton，否则伪元素定位失效、光效错位；.skeleton单独存在 → 无法绑定到具体组件，复用时尺寸/圆角/行高全乱。
-
.card--skeleton用于整张卡片容器（需设position: relative） -
.card__title--skeleton用于标题占位块（保留真实line-height和margin-bottom） -
.card__avatar--skeleton用于头像（必须用radial-gradient+aspect-ratio: 1/1）
background-image两层渐变必须在--skeleton修饰符里显式重写
BEM 不允许靠继承传递 background-image——父级 .card 的渐变不会透给 .card--skeleton，必须在修饰符 CSS 中完整声明两层：linear-gradient（结构灰）和 linear-gradient（扫光条），且顺序不能颠倒。
错误写法：.card--skeleton { background: linear-gradient(...); } → 覆盖了底层结构，只剩光条，整个区域发白；正确写法必须用 background-image 显式叠加：
`.card--skeleton {
background-image:
linear-gradient(to right, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%),
linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
background-size: 200px 100%;
background-position: -200px 0;
background-repeat: no-repeat;
}`
- 两层渐变共用同一组
background-size和background-position，否则光条漂移 -
background-size必须用固定像素（如200px 100%），iOS Safari 不认rem或vw -
background-position初始值必须是负数（如-200px 0），让光从左外侧进入
动画必须绑定在::before伪元素上，而非--skeleton类本身
把 @keyframes shine 直接加在 .card--skeleton 上，会导致加载完成 display: none 后动画还在内存里跑，多个卡片复用同一动画实例，节奏错乱；真正生效的，是每个骨架子元素的 ::before。
关键约束：
- 父容器（如
.card--skeleton）必须设position: relative -
.card__title--skeleton::before必须有content: ""+position: absolute+inset: 0 - 所有骨架容器必须加
overflow: hidden，否则圆角区域光效滑出漏白边 - 动画定义中单位不能省：
background-position: -200px 0，不能写成-200 0（IE/旧 Chrome 会忽略）
加载完成时移除--skeleton要配合opacity过渡，不能只切display
直接 element.classList.remove('card--skeleton') + display: none，真实内容插入瞬间会触发重排，“页面跳一下”；等动画播完再删类，又会出现“闪一下”感。
正确做法是用 opacity 过渡隐藏骨架层，同时插入真实 DOM：
- JS 中先加
card--skeleton，再发起请求 - 数据返回后，立即插入真实内容，同时给骨架层加
card--skeleton-fade-out类（含opacity: 0+transition: opacity 0.2s） - 监听
transitionend事件，检查event.propertyName === 'opacity'后再remove所有 skeleton 类
最易被忽略的是：动画结束清理必须过滤事件来源，否则一个卡片上的 transitionend 可能误删另一个卡片的类；--skeleton 类一旦加错层级（比如加在 body 上），后续所有子元素的伪元素都会脱标错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
