必须用 Element Modifier，即 .modal__overlay--fade-in；因为渐变是遮罩层自身状态变化，需复用基础类的 transition 和显隐属性，且 --fade-in 仅负责激活态样式，确保动画平滑。
遮罩层渐变效果该用 Element Modifier 还是 Block Modifier？
必须用 .modal__overlay--fade-in，不能写成 .modal--overlay-fade 或 .modal__overlay-fade。因为渐变是遮罩层自身的视觉状态变化，不是整个弹窗组件的变体，也不是新元素——它仍属于 modal__overlay 这个 Element 的一种表现形式。
为什么 --fade-in 要定义在 .modal__overlay 基础类之后？
因为过渡动画依赖 opacity 和 visibility 的初始值，而这些必须写在常态类里，否则隐藏时会跳变。常见错误是把 transition 和 opacity 变化全塞进 --fade-in 里，导致关闭无动画。
-
.modal__overlay必须声明：opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s step-end; -
.modal__overlay--fade-in只负责激活态：opacity: 1; visibility: visible; - 不要用
display: none配合 Modifier —— display 不可过渡，必踩坑
渐变遮罩是否需要独立 CSS 声明？
不需要。所有遮罩层（modal__overlay、drawer__overlay、toast__overlay）复用同一套基础样式和 Modifier 即可。只要它们都遵循 BEM 层级，--fade-in 就能跨 Block 复用。
- 基础类
.modal__overlay不写 position 或 background，只管过渡和显隐逻辑 - 定位和背景色由各自 Block 独立控制：
.modal__overlay写position: fixed，.drawer__overlay也写同一条规则，不重复 - 若需不同渐变方向或色值，用更细粒度的 Modifier：
.modal__overlay--fade-up、.modal__overlay--gradient-blue，但它们仍是 Element Modifier
React 中如何安全地切换 --fade-in 类名？
别手动拼字符串，也别用 classnames 在 JSX 里分散判断。统一收口到一个状态计算函数里，避免漏掉 --fade-in 或误加错层级。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：基于
isOpen状态，生成完整 class 字符串：`${base} ${isOpen ? modifier : ''}` - 错误写法：
className={`modal__overlay ${isOpen && 'modal__overlay--fade-in'}`}→ 空格残留风险高 - 更稳妥：用
clsx（classnames的现代替代）并传入数组：clsx('modal__overlay', { 'modal__overlay--fade-in': isOpen })
modal__overlay 的从属身份——哪怕它动得再 fancy，也还是那个 Element。 
