遮罩层必须是 .modal__overlay，因其是 modal 的从属元素而非独立组件；用 .overlay 易引发命名冲突，.modal-overlay 违反 bem 原则，无法准确表达归属关系。
遮罩层（overlay）必须依附于弹窗（modal）存在，不能独立使用——所以它不是 .overlay，也不是 .modal-overlay，而应是 .modal__overlay。
为什么不能用 .overlay 或 .modal-overlay
单独的 .overlay 会脱离命名空间，一旦项目里出现轮播图遮罩、加载遮罩、侧边栏遮罩，就必然冲突；.modal-overlay 看似合理，但违反 BEM 原则：它用单连字符（-）混淆了 Block 和 Modifier 的语义边界，且无法表达“overlay 是 modal 的一部分”这一从属关系。BEM 要求元素必须通过双下划线（__）显式声明归属。
.modal__overlay 的实际使用场景
遮罩层通常和弹窗内容共存于同一 Block 内部，HTML 结构类似：
<div class="modal"> <div class="modal__overlay"></div> <div class="modal__content">...</div> </div>
对应 CSS 只需写：
.modal__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1000;
}
- 不依赖父选择器（如
.modal .modal__overlay），避免嵌套带来的权重和维护风险 - 不加
!important，靠类名本身保证样式优先级 - 若需控制显示/隐藏，用
.modal__overlay--hidden而非.modal--overlay-hidden，因为这是 overlay 自身的状态，不是 modal 的变体
当遮罩需要不同视觉表现时，用 Element Modifier
比如深色遮罩、半透明动画遮罩、无背景点击穿透遮罩——这些都属于 .modal__overlay 的状态变化，不是新组件：
- 深色遮罩：
.modal__overlay--dark - 带淡入动画：
.modal__overlay--fade-in - 点击穿透（pointer-events: none）：
.modal__overlay--passive
注意：不要写成 .modal--overlay-dark，那会错误地把遮罩当作 modal 的修饰符，模糊了“overlay 是 modal 的 element”这一层级事实。
BEM 最容易被绕晕的地方，就是分不清「某个东西是不是独立 Block」。遮罩层没有语义完整性——它不承载内容、不定义交互逻辑、不单独复用，它只是 modal 的视觉附属物。只要这个判断成立，__ 就是唯一合法连接符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
