应使用语义化修饰符命名颜色变体，如 .badge--success 而非 .badge--green；颜色抽为 css 变量统一管理；多修饰符按语义层级固定顺序（颜色→变体→尺寸→形状）；js 动态渲染需白名单校验与小写清洗。
用语义化修饰符命名颜色变体，别用 green/red
直接写 .badge--green 或 .badge--red 是错的——颜色会变，语义不会。比如设计规范把 success 改成青绿色，所有 --green 类就得重命名、重测、重上线。必须用业务含义命名：success、danger、warning、discovery。这些类名在 HTML 里读起来是“这个徽章表示操作成功”，而不是“它应该渲染成绿色”。
常见错误现象：.badge--error 和 .badge--danger 同时存在，但语义重叠；或 JS 动态加类时传入 color="err"，导致 .badge--err 样式缺失。
- 只允许枚举已定义的语义值：
success、danger、warning、info、discovery、secondary - 修饰符必须紧耦合块名，写成
.badge--success，不能拆成.success-badge或.badge-success - React/Vue 中传 color prop 时，用类型约束兜底：
type BadgeColor = 'success' | 'danger' | ...;，避免运行时拼错
颜色值交给 CSS 变量，别硬编码在选择器里
每个 .badge--success 里写 background-color: #28a745; 看似简单，但按钮、标签、状态栏也要同色时，就得六七处同步改。正确做法是把颜色抽到 :root 变量中，类名只负责“绑定语义”，不负责“决定颜色”。
示例：
:root {
--badge-success: #28a745;
--badge-danger: #dc3545;
--badge-warning: #ffc107;
}
.badge--success { background-color: var(--badge-success); }
.badge--danger { background-color: var(--badge-danger); }
这样换主题、切暗色模式、甚至运行时动态换色（比如用户偏好设置），只需改变量值，不用动任何类名或组件逻辑。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 变量名带前缀（如
--badge-）避免全局污染，也方便 IDE 补全 - 务必提供 fallback：
background-color: var(--badge-info, #007bff);，防止变量未定义时样式崩塌 - 不要在
.badge--success里同时设color和border-color—— 它们应分别引用--badge-success-text和--badge-success-border，保持控制粒度
多修饰符组合时按语义层级排序
一个徽章可能同时有颜色、尺寸、样式三个维度，比如 .badge--success--lg--outline。BEM 不禁止多个修饰符，但顺序必须反映语义优先级：类型 → 状态 → 尺寸 → 形状。这里 “success” 是核心语义，“lg” 是辅助规格，“outline” 是视觉风格。
常见错误现象：写成 .badge--lg--success--outline，导致 CSS 选择器权重混乱；或 JS 拼接类名时顺序随机，不同环境渲染结果不一致。
- 固定顺序：颜色（
--success）→ 变体（--outline）→ 尺寸（--lg）→ 形状（--pill） - 禁止嵌套修饰符，比如
.badge--success--outline--lg是合法的，但.badge--success-outline违反 BEM 命名规则 - 如果某组合实际不存在（如
--discovery--pill），CSS 里就不声明，靠编译期或运行时校验拦截，而不是留空样式
JS 动态渲染时必须做白名单校验与小写清洗
前端常从后端接口拿到 color: "SUCCESS" 或 color: "DisCoVeR"，直接拼成 badge--SUCCESS 会导致样式失效。BEM 类名是大小写敏感的，且只接受小写连字符格式。
实操建议不是简单 .toLowerCase()，而是查白名单映射：
const colorMap = {
'success': 'success',
'SUCCESS': 'success',
'Success': 'success',
'discovery': 'discovery',
// ……其他映射
};
const safeColor = colorMap[rawColor] || 'secondary';
更稳妥的做法是在组件 props 层就做类型约束 + 枚举校验，不让非法值进 DOM。
- 永远不要信任后端返回的字符串，即使文档写明“只返回 success/danger”
- 白名单必须和 CSS 中实际声明的修饰符完全一致，包括拼写、连字符、单复数
- 开发阶段开启 strict mode 报错，而不是静默 fallback 到
--secondary，否则问题容易被掩盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
