<p>弹窗容器 class 命名必须带业务前缀（如 .user-modal），采用 BEM 规范：顶层为 Block，子元素以 Block 名为前缀（如 .user-modal__overlay），状态用 is- 修饰符（如 .user-modal--success），遮罩与内容需平级分离并独立定位，响应式通过 Block 修饰符统一控制。</p>
弹窗容器 class 命名必须带作用域前缀
不加前缀的 .modal 或 .dialog 会和第三方库、旧项目样式冲突，尤其在微前端或多人协作中。BEM 要求模块级命名有唯一标识，比如用业务或功能缩写：.user-modal、.pay-dialog。避免用泛义词如 .popup —— 它既不表意，也不隔离。
常见错误是写成 .modal__content 却没定义顶层 .modal，结果样式无法生效；或者多个弹窗共用同一套 BEM class，导致状态类（如 .is-open）互相干扰。
- 顶层容器必须是
B（Block），例如.order-confirm-modal - 所有子元素 class 都要以该 Block 名为前缀：
.order-confirm-modal__overlay、.order-confirm-modal__body - 状态修饰符统一用
is-开头：.order-confirm-modal--success表示成功态变体
overlay 和 content 必须用独立 BEM 元素，不能混用 position 层级
很多人把遮罩层和弹窗内容写进同一个 div，再靠 z-index 拉扯层级，结果一加动画就错位，或者 transform 导致 fixed 失效。BEM 不是只管命名，它倒逼结构合理：遮罩是独立元素 .xxx-modal__overlay，内容是另一个 .xxx-modal__content，两者平级嵌套在 Block 内。
这样做的好处是：overlay 可单独控制透明度/点击穿透，content 可独立做 scale 动画，且不会因父级 transform 影响定位上下文。
立即学习“前端免费学习笔记（深入）”；
- 结构必须是：
<div class="xxx-modal"> <div class="xxx-modal__overlay"></div> <div class="xxx-modal__content"></div> </div>
-
.xxx-modal__overlay用position: fixed+inset: 0，不依赖父级定位 -
.xxx-modal__content用position: fixed或absolute，但 top/left 基于 viewport 计算，而非父容器
content 内部子块要用 BEM 元素而非嵌套 class
弹窗里常有标题、按钮组、表单字段等，如果写成 .xxx-modal__content .title 或 .xxx-modal__content h2，就破坏了 BEM 的封装性，也容易被全局样式污染。正确做法是每个视觉区块都作为 Block 的直属元素声明。
比如一个确认弹窗，应该有 .xxx-modal__header、.xxx-modal__footer、.xxx-modal__form，而不是让 footer 依赖 .xxx-modal__content > .actions 这种脆弱选择器。
- 按钮组应为
.xxx-modal__actions，不是.xxx-modal__content .btn-group - 输入框应为
.xxx-modal__input，而非复用全局.input类 - 所有元素 class 都显式携带 Block 前缀，杜绝隐式继承或上下文依赖
响应式断点必须绑定到 Block，不能写在元素内部
移动端弹窗常需要全屏、取消圆角、调整 padding，如果把 @media 写在 .xxx-modal__content 里，会导致样式逻辑分散；更糟的是，有人把断点写在 JS 里动态切 class，完全脱离 CSS 管理。
BEM 下响应式应由 Block 统一控制：用修饰符表达设备态，比如 .xxx-modal--mobile，然后在该修饰符下重置子元素行为。这样可维护、可预测，也方便自动化测试。
- 媒体查询只出现在 Block 级规则中：
.xxx-modal--mobile .xxx-modal__content - 避免在
__overlay或__footer里单独写@media - JS 控制时，只切换 Block 的修饰符 class，不操作子元素 class
transform 或 will-change，overlay 的 z-index 就可能失效。这时候得检查是否意外创建了新的层叠上下文。 
