正确做法是将 loading 修饰符绑定到具体 Block（如 .list--loading）或其 Element（如 .list__loader--loading），而非孤立使用 --loading 或 .loading；前者语义明确、符合 BEM 层级，支持精准样式控制与状态隔离。
如何给无限滚动容器定义 loading 修饰符
直接用 --loading 是错的——它没说明“谁在加载”，也不符合 BEM 的语义层级。无限滚动的加载状态必须绑定到具体 Block（比如 list 或 feed），而不是泛泛而谈的“loading”。
正确做法是把加载态视为 Block 的一种行为变体，例如：.list--loading 表示整个列表处于加载中；若需更精细控制（如只让底部加载提示显隐），则用 Element 修饰符：.list__loader--loading。
-
--loading必须依附于明确 Block 或 Element，不能单独存在（如.loading违反 BEM 原则） - 避免写
.list__item--loading：列表项本身不“加载”，是容器在加载新数据 - 如果加载提示是独立组件（如一个旋转图标），它应是自己的 Block：
.spinner，而非强行塞进list的命名空间
list--loading 和 list__loader--loading 该选哪个
取决于你控制的是“整体行为”还是“局部 UI”。list--loading 适合禁用交互、加遮罩、暂停滚动监听；list__loader--loading 仅控制底部加载提示的显示/动画。
常见错误是混用：比如同时设 .list--loading 和 .list__loader--hidden，结果样式冲突或逻辑割裂。
立即学习“前端免费学习笔记（深入）”；
- 用
list--loading时，CSS 中可统一设置pointer-events: none、opacity: 0.7等全局态 - 用
list__loader--loading时，只动display、visibility或动画属性，不影响列表主体 - React/Vue 中建议通过单一状态变量驱动，比如
isLoading控制list--loading，再用showLoader控制list__loader--loading，二者可不同步（如加载完成但暂不收起 loader）
为什么不能用 is-loading 这类 State 类
is-loading 属于通用状态类，BEM 本身不禁止，但它破坏了 Block 的封装性——一旦多个 Block 都用 is-loading，你就无法区分“哪个列表正在加载”，也无法写精准的 CSS 隔离规则。
比如 .is-loading .list__item 会意外影响所有列表项，而 .list--loading .list__item 是受控的、可预测的。
-
is-类适合跨 Block 复用的状态（如is-disabled），但加载态通常是 Block 局部行为 - 构建工具（如 PostCSS）或 CSS-in-JS 方案中，
is-loading很难做作用域提取，容易打包进全局样式表 - 调试时，DOM 上看到
is-loading完全看不出上下文；而list--loading一眼定位问题模块
SCSS 中怎么安全生成 --loading 修饰符
别手写重复代码，用 SCSS 的 &--loading 语法最稳妥。但要注意：必须严格限制嵌套层级，禁止在修饰符内部再嵌套后代选择器。
错误示范：
.list {
&--loading {
.list__item { opacity: 0.5; } // ❌ 后代选择器，破坏 BEM 隔离
}
}
正确写法：
.list {
&--loading {
opacity: 0.7;
pointer-events: none;
}
&__loader {
&--loading {
display: block;
animation: spin 1s infinite;
}
}
}
- 每个 Block 的修饰符必须在自身作用域内定义，不污染其他 Block
- 如果需要“加载中时隐藏分页器”，应该定义
.list__paginator--hidden-when-loading，而不是在&--loading里写.list__paginator { display: none } - 修饰符名要可预测：
--loading表示“正在发起请求”，--loaded表示“数据已就绪但尚未渲染”，两者语义不能模糊
--loading，都得能回答“谁在加载、为什么加载、加载失败时怎么降级”。否则，它只是多打了两个短横线。 
