通知框 class 应采用 bem 分层命名（如 notify--success），避免语义耦合；定位需据场景选 fixed 或 absolute，并规避 transform 干扰；颜色须满足可访问性对比度，深色模式单独定义；销毁时需清理 transitionend 监听器或用 getcomputedstyle+settimeout 兜底。
通知框的 class 命名怎么避免语义混乱
直接用 success、error 这类词当 class 名，上线后容易和业务逻辑耦合——比如某天产品说“红色不等于错误，只是高优先级”，你就得全局搜替换，还可能误改 JS 判断逻辑。
推荐按「行为 + 状态」分层命名：notify--success、notify--warning，加双中划线强调这是修饰符；主容器统一用 notify，后续加动画、主题、尺寸变体都好扩展。
- 别用
.red、.big这类纯样式名，CSS 重构时会失控 - 如果项目已用 BEM，保持
notify__content这种结构，别混用 SMACSS 的l-notify - 颜色值不要硬写在 class 里（如
notify--red），而是通过 CSS 自定义属性控制：--notify-bg: #28a745
定位 fixed 还是 absolute？关键看滚动容器
用 position: fixed 最常见，但一旦通知框要嵌在某个 modal 或 tab 面板里，父容器设了 transform 或 will-change，fixed 就会相对该容器定位，而不是视口——结果通知框飘在半空，甚至被裁剪。
这时候得切回 position: absolute，并确保父容器有 position: relative 且无 transform 干扰。更稳妥的做法是：用 JS 动态判断最近的「定位上下文」，再决定渲染策略。
立即学习“前端免费学习笔记（深入）”；
- 全局通知 → 用
fixed，挂载到document.body - 局部通知（如表单内）→ 用
absolute，父容器必须显式设position: relative - 避免在
fixed元素上套transform，哪怕只是translateZ(0)也会创建新层叠上下文
颜色提示不能只靠 hue，得兼顾可访问性对比度
很多团队把 success 设成浅绿色 #d4edda，看着柔和，但和白色文字搭配时对比度只有 1.4:1，远低于 WCAG AA 要求的 4.5:1。色觉障碍用户根本看不出区别。
真正可用的颜色方案得同时满足：视觉区分度 + 文字可读性 + 色盲友好。比如 success 用深绿 #155724 + 白字，warning 用深琥珀 #856404 + 白字，再配图标辅助（✅ / ⚠️）。
- 用 Chrome DevTools 的「Rendering」面板勾选「Emulate vision deficiencies」实时预览
- 别依赖 color picker 的「亮度」值，要用在线工具测实际对比度，比如
https://webaim.org/resources/contrastchecker/ - 深色模式下，同一套 HSL 色值可能失效，建议用
prefers-color-scheme单独定义变量
JS 控制通知销毁时，transitionend 事件容易漏绑
想让通知框淡出再移除 DOM，通常写 element.classList.add('is-closing') 触发 CSS transition，然后监听 transitionend 删除元素。但问题来了：如果用户快速连续触发多个通知，前一个还没走完 transition，后一个就覆盖了 class，transitionend 就永远不触发，DOM 泄漏。
根本解法不是防抖，而是每次绑定事件前先清理旧监听器，或者改用 getComputedStyle 检查 opacity 是否归零再移除——更可靠，不依赖事件时机。
- 监听
transitionend时指定propertyName，避免其他 transition（如 padding）干扰：e.propertyName === 'opacity' - 用
setTimeout回退方案兜底，比如 300ms 后强制移除，防止卡死 - Vue/React 里别在
useEffect或mounted里直接 addEventListener，记得在销毁时removeEventListener
