警告提示框的 Block 名必须是 alert，因其语义中性通用，支持 success/info/error/warning 四种状态；修饰符如 alert--success 必须作用于 Block 根而非子元素，以确保样式统一、JS 控制安全及无障碍语义一致。
警告提示框的 Block 名必须是 alert，不是 notification 或 warning
用 notification 容易和通知中心、系统 toast 冲突；用 warning 则语义过窄——它只覆盖“警告”，但实际要支持 success / info / error 四种状态。而 alert 是中性、通用、无交互暗示的 Block 名，和 HTML 、 一样，只表达“需用户注意的独立信息单元”。
常见错误：notification--warning、toast-error、ui-alert——前两者绑定业务场景，后者加冗余前缀，都破坏 BEM 的复用边界。
正确结构只有一套：alert（Block）、alert__icon（Element）、alert--success（Modifier）。
alert--success 这类修饰符必须作用于 Block 根，不能写成 alert__content--success
状态是整个提示框的语义属性，不是某个子元素的局部表现。把修饰符挂在 alert__content 上会导致三类问题：
- 样式断裂：修改
alert--success时需同步调整 icon 颜色、边框、背景、文字色，若分散在不同选择器里，极易漏改 - JS 控制成本高：切换状态得同时操作多个 class，比如
el.classList.replace('alert--error', 'alert--success')就比el.classList.replace('alert__content--error', 'alert__content--success')更安全、更可读 - 无法响应无障碍需求：屏幕阅读器靠
role="alert"+aria-live感知整体状态，修饰符挂错位置会削弱语义一致性
所有视觉差异（图标、颜色、边框、间距）都应在 alert--success 规则内统一声明，例如：
.alert--success {
background-color: var(--alert-success-bg);
border-left-color: var(--alert-success-border);
}
.alert--success .alert__icon {
background-color: var(--alert-success-icon-bg);
}
状态类名必须语义化，禁止用颜色或视觉词命名
写 alert--red 或 alert--icon-left 看似直观，实则埋下维护雷：
- 设计规范从红色系换成青绿色系后，
alert--red不再准确，但又不敢删——怕误删其他地方的依赖 -
alert--icon-left在 RTL 布局下失效，且无法表达“这是成功态”的业务含义 - 无障碍工具无法将
red映射到“成功”语义，影响语音反馈质量
应严格使用设计系统定义的状态语义：alert--success、alert--info、alert--warning、alert--error。这些名字在 Figma 层名、PR 描述、a11y audit 报告中都能直接对齐。
颜色等视觉表现全部交给 CSS 自定义属性控制，例如：
:root {
--alert-success-bg: #e8f5e9;
--alert-success-border: #4caf50;
--alert-success-text: #2e7d32;
}
关闭按钮的交互逻辑必须解耦，不依赖 alert--closable 这类修饰符
alert--closable 是反模式——它混淆了“是否允许关闭”（行为）和“是否已关闭”（状态）。真正需要的是两个正交控制点：
- 结构上始终存在关闭按钮：
alert__close是alert的固定 Element，不随状态增删 DOM - 行为由 JS 控制显隐：
alert--closed表示当前已收起，仅用于触发动画或隐藏逻辑 - 禁用关闭功能时，用
alert--unclosable（非--closable=false），并配合pointer-events: none和aria-hidden="true"
这样既保证 HTML 结构稳定（利于 SSR 和爬虫），又让状态切换可预测。例如点击关闭时只需：
el.classList.add('alert--closed');
setTimeout(() => el.remove(), 300);
而不是反复 toggle alert--closable，后者容易在异步操作中丢失状态。
最易被忽略的一点：所有修饰符必须原子化、互斥且可叠加。比如 alert--success.alert--closed 合法，但 alert--success--closed 违反 BEM 规范，也阻碍 JS 动态管理——classList.toggle() 只接受单个字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
