toast组件bem命名必须包含基础块类.toast，状态修饰符如.toast--success、.toast--visible须与其共存且正交分离，禁用.toast--success--visible等嵌套写法，语义类控制主题变量，行为类专注动画逻辑。
Toast组件的BEM命名必须包含明确的修饰符层级
直接用 .toast--success 或 .toast--error 是不够的——BEM要求状态类必须依附于块或元素，不能孤立存在。常见错误是写成 .toast--visible 却没配合基础类 .toast，导致样式无法生效或覆盖混乱。
正确做法是：所有状态类都作为修饰符（modifier）绑定在块级类上，且不嵌套、不叠加多个状态类。例如：
<div class="toast toast--success toast--visible">操作成功</div>
-
.toast是必选的基础块类，定义通用结构和动画起始态 -
.toast--success和.toast--error是互斥的语义修饰符，控制颜色、图标等，不可同时存在 -
.toast--visible是独立的行为修饰符，只控制显隐与过渡，和语义无关 - 避免
.toast--success--visible这类嵌套修饰符，BEM不支持双连字符链式写法
状态类要分离语义与行为，否则CSS可维护性会迅速崩溃
把“成功”和“显示中”混在一个类里，比如 .toast-success-visible，会导致后续加“警告+隐藏中”状态时类名爆炸，也难以复用动画逻辑。实际项目中，这类耦合会让 @keyframes 和 transition 难以统一管理。
推荐拆解为两组正交修饰符：
- 语义类（必选其一）：
.toast--info/.toast--success/.toast--warning/.toast--error - 行为类（可选）：
.toast--visible（触发动画）、.toast--closing（触发退出动画） - 禁止组合语义+行为的复合类，如
.toast--success-visible或.toast-success.is-visible - 用 JavaScript 切换类时，只增删行为类，语义类初始化后保持不变
用CSS自定义属性配合BEM修饰符提升主题扩展能力
纯BEM类名写死颜色和间距，换肤时就得改大量CSS。更稳妥的方式是让修饰符只负责“开关”，把具体值交给CSS变量。
例如：
.toast {
--toast-bg: #333;
--toast-color: #fff;
--toast-icon: url("data:...");
}
.toast--success {
--toast-bg: #28a745;
--toast-color: #fff;
--toast-icon: url("data:...");
}
.toast--visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.2s, transform 0.3s;
}
.toast {
background-color: var(--toast-bg);
color: var(--toast-color);
}
- 每个语义修饰符只负责设置变量，不写具体样式规则
- 行为修饰符（如
.toast--visible）专注动画逻辑，不碰颜色或图标 - 这样支持运行时切换主题：只需动态修改
:root下的--toast-bg等变量，无需重写BEM类 - 注意IE不支持CSS变量，若需兼容，得回退到Sass变量 +
@each生成多套类
JavaScript控制类名时，务必避免竞态导致的状态残留
Toast常被快速连续调用，比如用户连点两次保存按钮，就可能触发两个 .toast--visible 添加/移除操作。若没做防抖或队列控制，会出现 .toast--closing 被覆盖、动画中断、甚至类名堆积（如 .toast--visible toast--closing toast--visible）。
- 每次显示新Toast前，先清理旧实例的全部状态类（尤其是
.toast--visible和.toast--closing） - 用
getComputedStyle(el).opacity或el.classList.contains('toast--visible')判断当前是否已处于可见态，避免重复添加 - 移除
.toast--visible后，用setTimeout或transitionend事件再添加.toast--closing，确保动画顺序正确 - 不要依赖类名字符串拼接来判断状态，始终用
el.classList.contains()检查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
