骨架屏应作为block的modifier（如.card--skeleton）或element的modifier（如.card__skeleton--visible），而非独立block；因其是容器的视觉占位反馈，必须依附具体功能模块，确保语义明确、样式隔离、状态可控。
骨架屏该用哪个BEM层级：Block 还是 Element？
骨架屏不是独立功能模块，而是某个容器的视觉占位反馈，所以它必须作为 Block 的 Modifier（如 .card--loading）或其 Element 的 Modifier（如 .card__skeleton--visible），不能定义成孤立的 .skeleton Block。
常见错误是写成 .loading 或 .is-skeleton ——前者无归属，后者跨 Block 共享，导致样式泄漏。比如 .is-skeleton .card__title 会意外影响所有卡片标题；而 .card--loading .card__title 是受控且可预测的。
-
.card--loading表示整个卡片处于加载中，适合禁用交互、加遮罩、暂停监听 -
.card__skeleton--visible仅控制骨架结构显隐或动画，不影响主体内容状态 - 若骨架本身是复用组件（如带光扫效果的灰色块），它应是独立 Block：
.skeleton-block，而非塞进.card命名空间
如何命名 skeleton 类以匹配 BEM 修饰符语义？
BEM 修饰符必须用双连字符 -- 分隔，且名称需表达意图而非样式。写成 .card__skeleton--loading 是错的——skeleton 是结构，loading 是状态，二者职责混淆。
正确做法是让修饰符直接表达状态：.card--skeleton（表示当前卡片以骨架形式呈现），或更精准地：.card--skeleton-active（强调“正在展示骨架”这一可编程状态）。
- 禁止
.card__skeleton--on、.card--skeleton-v2等不可预测值 - 避免数字开头的动画名：
@keyframes 2x-scan会解析失败，必须用@keyframes skeleton-scan - JS 控制时，应统一用一个状态变量驱动，例如
isSkeletonVisible控制.card--skeleton类增删
background-position 动画与 BEM 类名如何绑定？
骨架屏的光扫动画必须绑定到真实 Block 容器上，伪元素（如 ::before）不参与 DOM 结构，但必须挂载在已声明的 Block 类选择器下，否则无法继承宽高比和状态。
错误写法：.skeleton::before ——浏览器不认 .skeleton 是 Block，除非 CSS 中明确定义了该类；正确写法是 .card__image::before，其中 .card__image 是已定义的 Element，且其父容器有 aspect-ratio 和 overflow: hidden。
-
aspect-ratio必须设在容器上（如.card__image），::before才能稳定占位 - 动画声明中
background-position: -200px 0单位不能省略（0要写成0px或0%），否则旧版 Chrome 和 IE 会忽略 -
background-size必须大于容器宽度（如300px 100%），iOS Safari 不支持rem单位
为什么不能用 .is-loading 驱动骨架屏？
.is-loading 是通用状态类，破坏 BEM 封装性：它无法区分“哪个模块在加载”，也无法写精准的 CSS 隔离规则。调试时看到 DOM 上有 is-loading，完全看不出上下文。
更关键的是，构建工具（如 PostCSS）或 CSS-in-JS 方案中，.is-loading 很难做作用域提取，容易打包进全局样式表，造成样式污染。
- 推荐用单一来源状态：比如 React 中用
isLoading控制.card--skeleton，再用hasLoadedContent控制.card--loaded，二者可不同步 - SSR 场景下，服务端与客户端的类名必须严格对齐，
.card--skeleton比.is-loading更易校验和 hydrate - 多层嵌套时，
.card--skeleton .card__title可被明确覆盖；而.is-loading .card__title可能被其他 Block 的同名规则干扰
真正容易被忽略的是：骨架容器没加 overflow: hidden，光效滑出圆角区域会露白边；图片占位没用 aspect-ratio 而是写死 height，缩放后比例失真——这两点在 iPhone 和小屏安卓上最明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
