loading__overlay 必须是 Element，采用 fixed+inset:0 定位、visibility+opacity 过渡、显式背景色及 pointer-events:auto，并通过 CSS 自定义属性统一 z-index 管理。
loading__overlay 必须是 Element，不能独立成 Block
遮罩层不是功能独立的组件，它依附于某个加载上下文（比如按钮点击后等待接口、表单提交中、弹窗初始化），语义上属于该 Block 的一部分。所以命名必须是 loading__overlay，而不是 overlay 或 loading-overlay ——后者违反 BEM 命名约定，也破坏状态统一性。
常见错误现象：button--loading .overlay 这种写法导致 JS 要同时控制两个类名；更糟的是 button__overlay__spinner，直接嵌套元素，BEM 明确禁止。
-
loading__overlay是标准写法，表示它是loadingBlock 下的直属 Element - 若用于不同场景（如
form提交中），应按上下文重命名：form__loading__overlay❌（错，元素不可嵌套）→ 正确是form__loading-overlay❌（错，用了中划线）→ 实际应为form__loading__overlay仍违规 → 所以真正合规的是：把加载态抽象为独立 Block，如form-loading，再设其 Element 为form-loading__overlay - 项目里已有
modal__overlay，复用同一套 CSS 规则即可，只需改类名前缀
transition 必须写在 loading__overlay 基础类里，不能放 --loading 中
动画只在显隐切换时生效，而 --loading 是 Modifier，只表达“当前处于加载态”，不负责过渡逻辑。把 transition 写在里面，会导致隐藏时无动画、直接跳变——这是线上最常被忽略的 CSS 动画陷阱。
正确结构：
立即学习“前端免费学习笔记（深入）”；
.loading__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease, visibility 0.15s step-end;
}
.loading--loading .loading__overlay {
opacity: 1;
visibility: visible;
}
- 必须用
visibility + opacity，不用display: none（不可过渡） -
step-end确保visibility在动画最后一帧才切换，避免闪现 - 如果 loading Block 根节点是
button，那.button--loading .button__loading__overlay不合法 → 应先确认 Block 名是否为button-loading，再设button-loading__overlay
fixed 定位 + inset: 0 是硬性要求，别碰 transform
loading__overlay 必须覆盖整个视口，且不随滚动偏移。唯一可靠方式是 position: fixed 配合 inset: 0（或回退写 top/right/bottom/left: 0）。任何父级或自身加 transform（包括 translateZ(0)）都会创建新层叠上下文，导致 z-index 失效、遮罩压不住内容。
- 确保
loading__overlay直接挂载在<body>下，或至少是<html>/<body>的直系子节点 - 不要给它设
transform，哪怕只是transform: translateZ(0)—— 这是 Safari 和 Chrome 里最隐蔽的层级断裂源 - 旧版 Safari 不支持
inset，需补四边：top: 0; right: 0; bottom: 0; left: 0 - 背景色必须显式声明：
background-color: rgba(0, 0, 0, 0.4)，rgba(0,0,0,0)在部分浏览器下不触发pointer-events
pointer-events 分层控制不能只靠 z-index
z-index 再高，如果 pointer-events 没配对，用户照样能点穿遮罩触发背后按钮。遮罩本身要拦截点击，但内部加载图标或「取消」按钮又得响应操作 —— 这需要分层设置。
-
loading__overlay上设pointer-events: none❌（错，这样完全点不中）→ 正确是pointer-events: auto（默认值，但显式写更安全） - 如果遮罩内含可点击元素（如「取消」按钮），它的父容器
loading__overlay必须保持pointer-events: auto，子元素无需额外设置 - 若遮罩盖住的是
overflow: hidden的祖先容器，fixed 元素可能被裁剪 —— 此时要检查并移除该限制，或临时改用position: absolute（仅限无滚动场景） - iOS Safari 下，软键盘弹出可能导致遮罩底部留白，建议用
min-height: 100dvh回退到100vh
loading__overlay，而是让所有使用它的 Block（button-loading、form-loading、table-loading）共享同一套 transition 和 pointer-events 行为，同时不互相干扰层级。这要求 z-index 必须抽成 CSS 自定义属性（如 --z-loading），由 Block 根节点统一声明，子元素绝不硬写 z-index。 
