遮罩层必须命名为.dialog__overlay，弹窗主体为.dialog__content，尺寸位置修饰符仅作用于.dialog，颜色动效通过CSS变量和统一transition控制，确保二者共享同一堆叠上下文。
遮罩层必须是 .dialog__overlay，不能独立成块
遮罩层没有独立语义和复用场景，它依附于模态框容器存在，脱离 .dialog 就失去意义。写成 .overlay 或 .backdrop 会破坏 BEM 层级，也容易和 ::backdrop 伪元素混淆。.dialog__overlay 明确表达“这是 dialog 的一部分”，且与主流 UI 库（如 Headless UI、Bootstrap）对齐。
常见错误包括：
- 把遮罩层当 Block 单独命名，导致 JS 控制时需同时操作两个不相关的 class
- 使用 .dialog__backdrop，后续遇到 backdrop-filter 或 element::backdrop 时产生理解歧义
- 在 HTML 中漏掉 .dialog__overlay 节点，只靠伪元素或内联样式模拟，丧失结构可控性
弹窗主体应为 .dialog__content，不是 .dialog__body
.dialog__content 是标准命名，语义上涵盖头部、主体、底部等所有可滚动/可交互的区域；而 .dialog__body 容易让人误以为仅指中间内容区（类似 article 的 body），实际中它常被用来包裹整个弹窗内部结构，反而模糊了边界。
使用 .dialog__content 的好处：
- 与 .dialog__overlay 构成清晰配对：overlay 覆盖页面，content 是其上唯一可交互容器
- 支持统一控制 z-index：二者同属一个 stacking context，避免因 transform 或 will-change 触发意外层叠上下文
- 便于动画联动：.dialog--is-open 可同时作用于 .dialog__overlay 和 .dialog__content 的 opacity / transform
尺寸和位置修饰符只能加在 .dialog 上
不要写 .dialog__content--large 或 .dialog__overlay--center。尺寸（--small/--large）和位置（--top-left/--center）是模态框整体的状态，不是某一层的视觉变体。
正确做法：
- .dialog--large 控制最大宽度、内边距、字体缩放，影响整个 .dialog 容器
- .dialog--no-backdrop 控制是否渲染 .dialog__overlay 节点（JS 中用 classList.toggle('dialog--no-backdrop')）
- 居中逻辑由 .dialog 自身的 flex/grid + transform 实现，.dialog__overlay 只负责 fixed 定位和背景色
否则会出现：
- .dialog__content--large 放大内容区但没调大 padding，按钮溢出
- .dialog__overlay--center 试图用绝对定位“居中遮罩”，结果遮罩层错位、点击穿透
颜色和动效尽量交给 CSS 变量和 Block 级 transition
遮罩层背景色别写死，用 background-color: var(--dialog-overlay-bg, rgba(0,0,0,0.5))；动画别分散到每个 Element 上，而是让 .dialog 统一声明 transition: opacity 0.2s, transform 0.3s，再由 .dialog--is-open 控制状态切换。
立即学习“前端免费学习笔记（深入）”；
这样做的实际收益：
- 换主题时只需改变量值，不用新增一堆 .dialog__overlay--dark 类
- JS 切换状态只需增删一个类名，不关心底层有多少层 DOM 节点
- 避免因遗漏某个 Element 的 transition 导致动画不同步（比如 overlay 淡入了，content 还卡着不动）
真正容易被忽略的是：遮罩层和弹窗主体必须共享同一个父 stacking context。如果 .dialog__content 里某个子元素用了 position: relative + z-index: 1，就可能把它抬高到 .dialog__overlay 之上——这种问题不会报错，但用户会点不到按钮。
