不该硬加--overlay后缀；遮罩层是modal等组件的内部元素，应命名为modal__overlay，而非modal--overlay或独立overlay块，以确保语义准确、状态统一、样式可复用。
遮罩层（overlay）的 BEM 命名该不该加 --overlay 后缀？
不该硬加。BEM 中的修饰符（--xxx）是用于表达「同一组件的不同状态或变体」，而不是「功能组合」。遮罩层本身不是独立组件，而是 modal、drawer 等组件的**内部结构元素**，应作为子元素（__overlay）存在。
常见错误是写成 modal--overlay 或 drawer--overlay，这会让 CSS 选择器语义错乱——--overlay 并非 modal 的一种“类型”，而是它必含的底层结构。
-
modal__overlay✅ 表示“modal 组件里的遮罩层” -
drawer__overlay✅ 同理，语义清晰、可复用、不污染全局 -
modal--overlay❌ 暗示“这是 modal 的 overlay 版本”，逻辑不通 -
overlay单独作为块名 ❌ 容易和其它遮罩场景（如 loading overlay、tooltip backdrop）冲突，缺乏上下文
drawer__overlay 和 drawer__panel 的层级与 z-index 怎么配？
BEM 不管 z-index，但命名直接影响你能否安全控制堆叠顺序。必须让 __overlay 和 __panel 属于同一个块作用域，才能用相对 z-index 配合定位实现预期遮盖效果。
典型结构：
<div class="drawer"> <div class="drawer__overlay"></div> <div class="drawer__panel"></div> </div>
对应 CSS 建议：
.drawer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }.drawer__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }.drawer__panel { position: absolute; top: 0; right: 0; width: 320px; height: 100%; z-index: 2; }
关键点：两者 z-index 差值为 1，且都在 .drawer 内部定位。若把 __overlay 提到 body 下，就脱离了 BEM 语义闭环，也容易被其他 z-index 打断。
多个弹窗嵌套时，modal__overlay 的透明度和 pointer-events 怎么设？
嵌套弹窗（比如 modal 里再开一个 confirm）不是靠叠加多个 __overlay 实现的，而是由最外层 modal 控制遮罩，内层只渲染内容。否则会出现灰色层层加深、点击穿透异常等问题。
正确做法是：只保留最外层 modal 的 __overlay，内层 modal 不渲染自己的 overlay。
- 外层
modal__overlay：设background-color: rgba(0,0,0,0.5)+pointer-events: auto - 内层 modal：只用
modal__content，不带__overlay子元素 - 若需视觉区分层级，用
modal--nested这类修饰符调整__content的背景/边框，而非叠加遮罩 - 避免写
pointer-events: none在 overlay 上——它会直接禁用关闭点击，除非你另有事件代理机制
要不要为遮罩统一抽一个 overlay 工具类？
不要。BEM 的核心是「组件即上下文」，抽离成全局工具类（如 u-overlay）会破坏封装性，导致样式不可预测：比如 modal__overlay 需要 fixed 定位，而 tooltip__overlay（如果真有）可能需要 absolute；透明度、过渡动画、点击区域逻辑也都依赖父组件行为。
真正该复用的是 CSS 自定义属性或 mixin，例如：
:root {
--overlay-bg: rgba(0, 0, 0, 0.45);
--overlay-transition: opacity 0.2s ease;
}
然后在各组件中局部引用：
.modal__overlay { background-color: var(--overlay-bg); transition: var(--overlay-transition); }.drawer__overlay { background-color: var(--overlay-bg); transition: var(--overlay-transition); }
这样既保持 BEM 结构完整，又避免重复写死值。名字一写错、层级一乱、z-index 一叠高，遮罩就变成“看不见的坑”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
