弹窗组件必须严格遵循bem规范：modal为block，modal__overlay为其直属element而非独立block；modal--visible须作用于modal根节点以统一控制显隐；transition需定义在modal__overlay基础类中，配合visibility step-end避免闪现；皮肤modifier应平级组合、语义清晰且不作用于遮罩层。
弹窗组件的CSS类名必须拆成两个独立Block：一个叫modal（内容区），一个叫modal__overlay（遮罩层），不能把遮罩层塞进modal内部用modal__overlay以外的方式命名——否则BEM结构就塌了。
为什么modal__overlay必须是Element，而不是独立Block
遮罩层和弹窗内容在DOM中通常紧邻，语义上属于同一交互单元：用户点modal__overlay关闭弹窗，它和modal共享显隐状态。所以modal__overlay是modal这个Block下的直属Element，不是另一个Block。
常见错误现象：overlay单独作为Block存在 → 后续无法绑定modal--visible统一控制显隐，动画逻辑分散，JS里要同时操作两个类名；或者写成modal__content__overlay → 违反BEM“元素不得嵌套”的铁律，且__content本身不该是中间容器语义。
-
modal__overlay只负责遮罩样式与过渡，不承担定位逻辑（定位由position: fixed硬写死） - 它必须和
modal平级出现在HTML中，但类名层级体现从属关系 - 若项目中还有抽屉（drawer）、通知浮层（toast），它们各自的遮罩应命名为
drawer__overlay、toast__overlay，复用同一套CSS声明即可
modal--visible该加在哪个节点上
必须加在modal这个Block根节点上，而不是modal__overlay或modal__content。因为--visible修饰的是整个弹窗组件的状态，不是某个子元素。
使用场景：React中你调用setIsOpen(true)，只需给最外层div加modal modal--visible，所有子元素（包括modal__overlay）通过CSS选择器联动响应：
.modal--visible .modal__overlay { opacity: 1; visibility: visible; }
.modal--visible .modal__content { transform: translateY(0); }
- 避免把
--visible加在modal__overlay上 → 遮罩显示但内容没动，体验断裂 - 禁止用
modal__overlay--visible单独控制遮罩 → 状态粒度太细，违背“Modifier只表达Block/Element自身变体”的原则 - 如果内容区也要独立开关动画（比如从右滑入），应另设
modal__content--entering，但它必须由JS配合modal--visible触发，不能脱离主状态
遮罩层的transition为什么不能写在modal__overlay--visible里
因为transition属性必须定义在常态（未激活）的类上，否则隐藏时会跳变——这是最容易被忽略的CSS动画陷阱。
正确写法是把transition写在modal__overlay基础类里，仅用opacity和visibility在modal__overlay--visible中切换：
.modal__overlay {
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s step-end;
}
.modal__overlay--visible {
opacity: 1;
visibility: visible;
}
- 错例：
.modal__overlay--visible { transition: ...; opacity: 1; }→ 隐藏时transition丢失，直接消失 - 禁用
display: none→ 它不可过渡，visibility才是BEM遮罩层的标配 -
step-end对visibility很关键：确保visibility: hidden在opacity动画结束帧才生效，避免闪现
当弹窗需要多套皮肤时，Modifier怎么组织
不要堆砌modal--marketing--fullscreen--dark这种长链式修饰符。BEM要求Modifier平级组合，语义清晰可预测。
例如营销页弹窗需圆角+阴影+深色背景，应拆成三个独立Modifier：
-
modal--rounded控制border-radius -
modal--shadowed控制box-shadow -
modal--dark-bg控制background-color
这样在JS中用clsx组合更安全：className={clsx('modal', { 'modal--rounded': isRounded, 'modal--shadowed': hasShadow })}。如果某页需要全部启用，就写modal modal--rounded modal--shadowed modal--dark-bg，而不是造一个新修饰符。
复杂点在于：这些Modifier是否该也作用于modal__overlay？答案是否定的——遮罩层样式应保持一致（半透明黑），它的视觉变体不属于弹窗皮肤范畴；若真有特殊需求（如渐变遮罩），应新建Block如gradient-overlay，而非污染modal__overlay。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
