优先使用 dialog 作为 block 名而非 modal，因其语义中性、复用清晰；dialog__overlay 必须是 element 而非独立 block；尺寸/位置修饰符仅作用于 dialog 本身；transition 必须定义在基础类上。
模态框 Block 名不能叫 modal，优先用 dialog
直接用 modal 作 Block 名在中大型项目里基本等于埋雷：Ant Design 的 ant-modal、Element Plus 的 el-modal、旧项目里的 notification-modal 都会和它冲突。BEM 要求 Block 必须语义中性且复用边界清晰，dialog 更合适——它不暗示“模态交互”，只表达“对话式容器”这个通用语义。
常见错误包括：modal__content 却没定义 modal 根类；或写成 popup-dialog 这种双名词嵌套，违反 BEM “Block 名必须原子化” 原则。
-
dialog✅ —— 基础 Block，所有样式收在dialog.css -
dialog--confirm✅ —— 用途修饰符，后缀表达语义，不破坏 Block 主体 -
confirm-dialog❌ —— 前缀破坏 block-first 原则，JS 切换类名时也难维护 -
dialog-modal❌ —— 嵌套式 Block 名，BEM 明确禁止
dialog__overlay 必须是 Element，不能独立为 Block
dialog__overlay 是 dialog 的直属 Element，不是另一个 Block。它和 dialog__content 在 DOM 中平级，但语义上属于同一交互单元：点遮罩关闭弹窗、显隐状态同步、动画联动响应——这些都依赖它作为 dialog 的一部分被 CSS 选择器捕获。
若把它拆成独立 Block（如 overlay），会导致：
- JS 需同时操作两个类名才能控制显隐，状态分散
-
dialog--visible失效，无法用.dialog--visible .dialog__overlay统一过渡 - 后续加
drawer__overlay或toast__overlay时，样式复用逻辑断裂
结构必须是：
<div class="dialog"> <div class="dialog__overlay"></div> <div class="dialog__content"></div> </div>
尺寸与位置修饰符只能作用于 dialog Block 本身
尺寸（--small / --large）和位置（--center / --top-left）是整个模态框的状态，不是某个子元素的视觉特征。它们必须挂载在 dialog 上，由 Block 统一控制布局上下文。
写成 dialog__content--large 或 dialog__overlay--center 是错的——前者会让内容区脱离容器约束，padding 错位；后者会把定位职责错误地塞给遮罩层，而 dialog__overlay 只该负责 position: fixed; inset: 0 和透明度过渡。
-
dialog--large✅ —— 控制max-width、font-size、内边距 -
dialog--center✅ —— 触发transform: translate(-50%, -50%)或place-items: center -
dialog__content--large❌ —— 元素级尺寸修饰符，破坏 BEM 层级职责 -
dialog--mobile❌ —— 响应式断点不该进修饰符，应由媒体查询包裹.dialog--large规则
遮罩层的 transition 必须写在基础类，不能放 --visible 里
transition 属性必须定义在常态类（如 .dialog__overlay）上，而不是激活态（如 .dialog__overlay--visible）。否则隐藏时动画会跳变——这是 CSS 动画最隐蔽的坑之一。
正确写法是：
.dialog__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s step-end, visibility 0.2s step-end;
}
.dialog--visible .dialog__overlay {
opacity: 1;
visibility: visible;
}
关键点：
-
step-end防止visibility突然生效导致闪现 - 不要用
dialog__overlay--visible单独控制遮罩——Modifier 不该承担主状态 -
dialog--visible必须加在dialog根节点，否则.dialog--visible .dialog__overlay选择器不匹配
真正容易被忽略的，是 transition 必须写在未激活的基础类上，而不是靠 JS 切换 Modifier 类来“启动”动画——后者在隐藏阶段根本不会触发 transition。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
