modal__overlay必须是element而非独立block，因其与modal语义同属一个交互单元，共享显隐状态；若拆为独立block会导致状态不同步、动画分散、违反bem嵌套禁令，且modal--visible必须作用于modal根节点以统一控制整体状态。
弹窗组件的CSS结构必须拆成两个独立 Block：遮罩层和内容区不能混写，否则 z-index 和动画都会失控。
为什么 modal__overlay 必须是 Element，而不是独立 Block
遮罩层和弹窗内容语义上属于同一交互单元：用户点击 modal__overlay 关闭弹窗，它和 modal 共享显隐状态。若把遮罩层单独声明为 overlay Block，会导致：
- JS 需同时操作两个类名（
modal--visible和overlay--visible），状态不同步风险高 - CSS 动画逻辑分散，比如
opacity在遮罩、transform在内容，无法用统一修饰符触发 - 违反 BEM “元素不得嵌套” 铁律，写成
modal__content__overlay会直接失效
modal--visible 该加在哪个节点上
必须加在 modal 这个 Block 根节点上，而不是 modal__overlay 或 modal__content。因为 --visible 表达的是整个组件的状态，不是子元素的局部表现。
- 正确结构：
<div class="user-modal user-modal--visible">...</div> - 错误做法：给
modal__overlay单独加modal__overlay--visible→ 遮罩显示但内容没动，体验断裂 - CSS 响应应靠选择器联动：
.user-modal--visible .user-modal__overlay控制遮罩，.user-modal--visible .user-modal__content控制内容位移
transition 为什么不能写在 --visible 类里
transition 属性必须定义在常态（未激活）的基础类中，否则隐藏时会跳变——这是最容易被忽略的 CSS 动画陷阱。
- 正确写法：
.user-modal__overlay { opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s step-end; } - 错误写法：
.user-modal__overlay--visible { transition: ...; }→ 只有显示过渡，隐藏无动画 - 禁用
display: none：它不可过渡；必须组合visibility+opacity
z-index 和 transform 冲突怎么破
只要用了 transform（哪怕只是 transform: translateY(0)），元素就自动创建新的层叠上下文，导致 z-index 失效。
- 遮罩层必须用
position: fixed+inset: 0，不依赖父级定位，也不加transform - 内容区若需
transform动画（如缩放、滑入），就把z-index提前设在modal根节点上，而非modal__content自身 - 避免在同一个元素上既写
transform又指望z-index跨上下文生效
真正难的不是写对类名，而是让 HTML 结构、CSS 定位、JS 状态三者严格对齐——遮罩和平级内容 DOM 必须紧邻，modal--visible 必须由单一状态源驱动，transition 必须落在常态类上。漏掉任意一环，动画就会闪、卡、错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
