加载占位应作为element或其modifier，而非独立block；例如.list__loader--loading精准控制底部提示，.list--loading表示列表整体不可交互状态，避免泛义类如.loading导致样式泄漏。
加载占位该用哪个BEM层级：Block还是Element？
加载占位不是独立功能模块，而是依附于某个容器的视觉反馈，所以它不该是顶层 Block（比如单独定义 .loading），而应作为目标 Block 的 Modifier 或其 Element 的 Modifier。例如列表加载时，.list--loading 表示整个列表处于不可交互状态；若只控制底部提示条，则用 .list__loader--loading。
常见错误是写成 .loading 或 .is-loading——前者无归属，后者跨 Block 共享，导致样式泄漏或无法精准控制。比如 .is-loading .card__title 会意外影响所有卡片标题，而 .list--loading .list__item 是受控且可预测的。
-
.list--loading适合禁用滚动、加遮罩、暂停监听等全局行为 -
.list__loader--loading仅控制底部加载提示的显隐或动画，不影响主体内容 - 如果加载提示本身是复用组件（如旋转图标），它应是独立 Block：
.spinner，而非塞进.list命名空间
::before伪元素做占位时，BEM类名怎么挂？
伪元素不参与 DOM 结构，但必须绑定到一个真实 Block 容器上，否则无法继承尺寸和状态。正确做法是把 ::before 写在 Block 类选择器下，比如 .img-placeholder::before，其中 .img-placeholder 是已定义的 Block，不是泛义工具类。
关键点在于：aspect-ratio 必须设在容器上（如 .img-placeholder），::before 才能继承宽高比并稳定占位；若直接写 .loading::before 却没声明 .loading 为 Block，就失去语义和尺寸锚点。
- 避免
.loading::before这种孤立写法——浏览器不认“loading”是 Block，除非 CSS 中明确定义了.loading选择器 - 推荐结构：
<div class="article-card__image"></div>，然后写.article-card__image::before - 禁止对
::before设置z-index: -1，容易被父级overflow: hidden剪掉
加载动画命名如何与BEM修饰符对齐？
动画名（animation-name）必须和 BEM 修饰符同名，且二者都需基于同一 Block。比如 Block 是 .spinner，那么修饰符是 .spinner--pulse，对应动画就该是 @keyframes spinner-pulse，JS 添加类时逻辑才直通。
不能错位：比如写 .spinner--pulse 却配 @keyframes pulse，或用数字开头如 @keyframes 2x-spin——CSS 标准禁止 IDENT 以数字开头，animation-name 会解析失败。
- 多个动画共存时用逗号分隔：
animation-name: spinner-pulse, fade-in，但每个都必须有对应@keyframes - 修饰符名要反映视觉形态，不是后台过程：
.spinner--pulse合法，.spinner--fetching不推荐——后者无法复用，也不可感知 - 如果用 CSS-in-JS 或构建工具，
.spinner--pulse类名必须实际存在，不能靠 JS 动态拼接
移动端加载占位要注意哪些BEM陷阱？
在移动端，::before 占位容易因 DPR 缩放或 iOS Safari 的渲染差异失效。BEM 本身不解决这些，但正确的层级划分能减少耦合带来的连锁故障——比如 .card__image::before 只影响卡片图片，不会因全局 * { box-sizing: border-box } 而塌陷。
真正容易被忽略的是：占位区域必须已知宽高比，否则布局抖动无法避免。BEM 不提供尺寸逻辑，但它强制你把尺寸约束写在 Block 上（如 .card__image { aspect-ratio: 4 / 3 }），而不是散落在各种 ::before 规则里。
- 不要用
em或%给::before设尺寸——它们依赖父级 font-size 或 padding，移动端易失准 - 兼容旧版 Safari 时，改用
padding-top: 56.25%+position: absolute，但依然要挂载在明确 Block 下 - 禁止在 Block 外部用
.list__item--loading：列表项不“加载”，是容器在加载数据，这个语义错位会导致状态管理混乱
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
