遮罩层不该单独命名一个bem块；它必须是.modal__overlay这样的element，因与modal强耦合、无独立语义和复用性，拆成.overlay会破坏状态统一控制与bem层级。
遮罩层该不该单独命名一个 BEM 块？
不该。遮罩层（.modal__overlay）不是独立功能模块，它和弹窗内容强耦合、无独立状态、不复用，硬拆成单独块（如 .overlay）反而破坏语义和维护性。BEM 的「块」必须能脱离上下文独立存在，而遮罩层离开 .modal 就失去意义。
.modal__overlay 还是 .modal-overlay？
必须用双下划线：选 .modal__overlay。后者 .modal-overlay 是连字符写法，属于「修饰符变体」或旧式命名，不符合 BEM 规范——它模糊了层级关系，让人误以为 overlay 是另一个块，也难以表达「这是 modal 的一部分」。BEM 明确要求子元素用 __，修饰符用 --。
要不要给遮罩层加修饰符？比如 .modal__overlay--dark
可以加，但只在真有视觉/行为差异时才加。常见误区是提前预设 --light/--dark 修饰符，结果项目里永远只用一种。实际中更常见的是：
- 遮罩透明度由
.modal--no-backdrop控制是否渲染整个.modal__overlay节点 - 颜色统一走 CSS 变量，如
background-color: var(--modal-overlay-bg, rgba(0,0,0,0.5))，避免为换色建一堆修饰符 - 动画控制交给
.modal--is-open影响整个块，包括.modal__overlay的opacity和transition
为什么不能把遮罩层写成 .modal__backdrop？
能写，但不推荐——backdrop 是 Web API 术语（backdrop-filter），容易和 CSS 的 ::backdrop 伪元素混淆。团队协作中，.modal__overlay 更直白、无歧义，且与主流 UI 库（如 Bootstrap、Headless UI）的 class 命名对齐。如果项目已用 backdrop，保持统一即可；新项目优先选 overlay。
真正容易被忽略的点是：遮罩层的 z-index 必须严格高于弹窗内容，但低于其他全局浮层（如 toast、loading）。这没法靠 BEM 类名解决，得靠 CSS 层级设计——.modal__overlay 和 .modal__content 应同属一个 stacking context，别让其中一个意外触发新层叠上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
