必须用 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 里，导致关闭无动画。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• .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 })

BEM 最容易被绕晕的地方，是把“视觉效果”当成“结构层级”。渐变只是遮罩层的一种状态，不是新组件，也不改变它作为 modal__overlay 的从属身份——哪怕它动得再 fancy，也还是那个 Element。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！