无限滚动容器必须用独立 block（如.infinite-scroll），不可塞入业务组件命名空间；其子元素统一用__命名，动画必须绑定到.infinite-scroll__track且精确匹配内容长度与时间值。
无限滚动容器必须用独立 Block，不能塞进业务组件命名空间
无限滚动是视觉动效，不是业务状态，.list--loading 或 .user-card--scrolling 这类写法会污染语义、限制复用。它该是一个可插拔的 Block，比如 .infinite-scroll，所有样式、动画、伪元素都围绕它定义。
常见错误是把无限滚动当成列表的修饰符：给 <ul class="list"></ul> 加 list--infinite，但 CSS 里没声明 .list--infinite 这个选择器——浏览器不认“听起来像无限”的名字，只认真实存在的类规则。
-
.infinite-scroll是 Block，必须在 CSS 中明确定义（哪怕只是display: block） - 它的子元素统一用
__命名：.infinite-scroll__track、.infinite-scroll__item - 禁止跨块写
.list__infinite-scroll或.carousel__infinite，这等于把两个职责耦合进一个类名
无缝滚动动画必须绑定到 track 元素，且 animation 属性不可继承
无限滚动的位移逻辑发生在 .infinite-scroll__track 上（flex 容器或 white-space: nowrap 行内块），所以动画修饰符如 .infinite-scroll__track--looping 必须直接挂在这层，而不是父容器或 item。
只加类名不写 animation 声明，动画根本不会动。BEM 不自动注入行为，修饰符本身是空壳。
.infinite-scroll__track--looping { animation: infinite-slide 20s linear infinite; }-
@keyframes infinite-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }—— 注意是 -50%，不是 -100%，才能实现首尾视觉衔接 - 不能把
animation写在.infinite-scroll上再靠继承传下去，transform 动画不继承，且会因层级错乱导致卡顿
加载占位与骨架屏要用独立 Block，修饰符不能混用 loading--xxx
无限滚动列表常配合骨架屏（skeleton）做初始占位，但 loading--skeleton 这种写法只有在 .loading 是已定义 Block 时才合法。而无限滚动场景下，骨架屏应属于列表内容层，推荐用 .infinite-scroll__item--skeleton。
原因：骨架屏是 item 的视觉形态，不是全局 loading 状态；把它和 .loading 块强行挂钩，会导致 JS 控制混乱（比如同时要处理 .loading--skeleton 和 .infinite-scroll__item--skeleton 两套类名）。
- 正确结构：
<li class="infinite-scroll__item infinite-scroll__item--skeleton"> - CSS 中必须有对应规则：
.infinite-scroll__item--skeleton { background: linear-gradient(...); } - 避免
.infinite-scroll--skeleton这种写法——它暗示整个容器变骨架，但实际只需 item 占位
伪元素做无缝衔接时，::before 必须挂载在 Block 容器上
为解决首尾衔接跳动，常用 ::before 复制前半段内容拼接在末尾。但这个伪元素必须依附于一个真实 Block，否则尺寸、宽高比、动画上下文全丢失。
错误写法：.infinite-scroll__track::before 却没定义 .infinite-scroll__track 为 Block（即 CSS 中无该选择器）；或更糟，直接写 .scrolling::before，而 .scrolling 根本不是 BEM Block。
- 确保
.infinite-scroll__track在 CSS 中有基础声明（哪怕只有position: relative） -
.infinite-scroll__track::before的content必须是复制的 DOM 片段（用 JS 注入或服务端渲染），不能靠纯 CSS 生成文字 - 禁止对
::before设z-index: -1，若父容器有overflow: hidden，它会被直接裁掉
最易被忽略的是：无限滚动的“无限”感，90% 来自动画时间与内容长度的精确匹配，而非类名多酷炫。写 animation-duration: 30s 却只放 3 个 item，滚动就会飞快；反之，20 个 item 配 10s，又慢得像卡顿。BEM 类名只是开关，节奏得靠数据量和时间值对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
