modal__overlay是唯一合法写法，因其严格遵循bem规范：__表示overlay是modal的element而非独立block或modifier，避免命名冲突与层级误判，确保样式自包含、状态可控且多组件可安全复用。
遮罩层不是独立组件，必须命名为 modal__overlay（或 dialog__overlay），不能叫 overlay、modal--overlay 或 modal-overlay。
为什么 modal__overlay 是唯一合法写法
遮罩层没有语义完整性：它不承载内容、不定义交互逻辑、不能脱离 modal 单独复用。BEM 中只有 Block 和 Element 能构成从属关系，而 __ 就是表达“这是 modal 的一部分”的唯一合法符号。
-
overlay单独成块 → 项目里出现 loading overlay、tooltip backdrop 时必然命名冲突 -
modal--overlay暗示“modal 的一种类型”，但遮罩不是 modal 的变体，而是必含结构 -
modal-overlay用单连字符混淆 Block/Modifier 边界，BEM 解析器和开发者都会误判层级
modal__overlay 的 CSS 定义要点
样式必须自包含，不依赖父选择器，且 transition 要写在基础类上，否则隐藏时会闪退。
- 定位用
position: fixed硬写死，不靠modal的position: relative去撑开 - 必须声明
opacity和visibility，并配transition: opacity 0.2s ease, visibility 0.2s step-end—— 这行不能写在modal__overlay--visible里 - 禁止用
display: none控制显隐，它不可过渡 -
z-index值只对modal__overlay和modal__content之间有意义，两者必须同属一个 Block 作用域
遮罩状态变化该用 Element Modifier 还是 Block Modifier
所有视觉或行为变化都属于遮罩层自身状态，必须用 modal__overlay--xxx，比如：
-
modal__overlay--dark：深色背景 -
modal__overlay--fade-in：带淡入动画 -
modal__overlay--passive：pointer-events: none，点击穿透
不能写成 modal--overlay-dark —— 那等于把遮罩当成 modal 的一种类型，破坏了“overlay 是 element”这个基本判断。
多个组件共用遮罩样式怎么复用
抽屉（drawer）、通知浮层（toast）、全屏弹窗（dialog）的遮罩，各自命名但共享同一套 CSS 声明：
.modal__overlay,
.drawer__overlay,
.toast__overlay,
.dialog__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s step-end;
}
关键点在于：命名隔离 + 样式复用。一旦你把遮罩抽成独立 Block，就再也无法保证它和对应组件的状态同步，JS 控制显隐时就得操作两个类名，状态管理立刻变脆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
