应使用语义化修饰符命名警告级别，如status--warning、status--caution、status--critical；BEM中通过Modifier（如notification--warning）表达变体而非新建Block；颜色应由CSS自定义属性控制，避免硬编码以支持主题切换、暗色模式与无障碍对比度要求。
警告颜色该用什么语义命名，而不是直接叫 warning-red
直接用颜色值或色相命名（如 warning-red、error-#d32f2f）会让样式失去业务含义，一旦设计规范调整红色系，所有用到它的组件都得逐个改。BEM 的核心是语义分层，警告级别本质是「严重性」，不是「颜色」。应该按行为意图命名：status--warning、status--caution、status--critical。这些类名在 HTML 中表达的是“这个提示需要用户注意但可忽略”，而不是“它必须渲染成红色”。
实际项目中，这类类名配合 CSS 自定义属性控制视觉表现更灵活：
:root {
--status-warning-color: #ffa726;
--status-caution-color: #fb8c00;
--status-critical-color: #d32f2f;
}
.status--warning { color: var(--status-warning-color); }
.status--caution { color: var(--status-caution-color); }
.status--critical { color: var(--status-critical-color); }
这样改主题时只需覆盖变量，不用动任何 BEM 类名或组件结构。
如何用 BEM 的修饰符（Modifier）区分警告级别，而不是新增 Block
很多人会为每种警告单独建一个 Block，比如 notification-error、notification-warning，这违背了 BEM 的复用原则——它们共享相同的结构、交互和容器逻辑，差异仅在于语义级别。正确做法是固定 Block 名（如 notification），用 Modifier 表达变体：
立即学习“前端免费学习笔记（深入）”；
-
notification：基础块，定义 padding、border-radius、font-size 等共性样式 -
notification--warning：仅覆盖 color、icon、background 等与级别相关的视觉属性 -
notification--critical：同上，不重复定义 layout
关键点是 Modifier 必须是「开关式」的，不带层级嵌套。避免写 notification--warning--urgent 这类多重修饰符——它模糊了语义边界，也增加维护成本。如果真有“紧急+警告”的复合场景，应由 JS 控制同时添加 notification--warning 和 notification--flash 两个独立 Modifier。
为什么不能把颜色变量写死在 Modifier 选择器里
把颜色直接写进 CSS 规则里（如 .notification--critical { background: #d32f2f; }）看似简单，但会带来三个实际问题：
- 暗色模式适配困难：无法通过
@media (prefers-color-scheme: dark)动态切换，只能复制整套规则 - 对比度校验失效：WCAG 要求文本与背景对比度 ≥ 4.5，而
#d32f2f在浅灰背景上可能不达标，需搭配不同背景色——硬编码就锁死了组合可能性 - 设计系统扩展受限：下游项目想微调 critical 色但保留其他语义，只能覆盖整个选择器，容易漏掉子元素（如
.notification__icon）
更稳妥的方式是让 Modifier 只负责「挂载语义标识」，视觉由自定义属性 + 层叠控制：
.notification--critical {
--notification-bg: var(--color-critical-bg, #ffebee);
--notification-text: var(--color-critical-text, #d32f2f);
}
.notification {
background-color: var(--notification-bg);
color: var(--notification-text);
}
这样既保持 BEM 结构清晰，又把设计决策（颜色、对比度、响应式）从 CSS 选择器中解耦出来。
实际项目中容易被忽略的兼容性细节
BEM 命名本身不解决浏览器兼容问题，但颜色系统落地时有几个真实踩坑点：
- CSS 自定义属性在 IE 中完全不可用，若需支持 IE11，必须用 PostCSS 插件（如
postcss-custom-properties）降级为静态值，且要确保降级后--color-critical-text不被误转成无意义的 fallback - 某些旧版 Safari 对
var(--x, #fff)的 fallback 解析不稳定，建议 fallback 值尽量简单（避免渐变、函数等），并加一层color: #d32f2f;作为兜底 - 当警告组件内含 SVG 图标时，
currentColor会继承文字色，但如果 Modifier 同时设置了background-color和color，务必确认 SVG 的fill是否也需同步调整——否则在status--critical下图标可能因 contrast 不足而看不清
配色系统的真正难点不在命名或结构，而在让语义层、视觉层、无障碍层、兼容层始终对齐。BEM 是骨架，但颜色变量和降级策略才是让它站稳的关节。
