徽章组件BEM结构定为badge块名，因其语义强调“状态提示”；基础结构<span class="badge">New</span>，修饰符用语义名如badge--success，多修饰符按“类型→状态→尺寸”顺序组合，JS动态渲染需白名单校验与小写清洗。
徽章组件的BEM结构怎么定：为什么用 badge 而不是 label 或 tag
选 badge 是因为语义更准——它强调“状态提示”而非分类（tag）或字段标注（label）。BEM 要求块名必须反映组件本质，否则修饰符会失去上下文。比如 badge--success 读起来自然，而 label--success 就容易让人疑惑“哪个 label 成功了？”
基础结构固定为：
<span class="badge">New</span>所有变体都基于这个块，不加额外 wrapper，避免嵌套过深。
颜色修饰符命名：用语义名（success）还是视觉名（green）
必须用语义名。CSS 中写 .badge--success { background: #28a745; }，而不是 .badge--green。原因很实际：
- 换主题时只需改变量值，不用批量替换类名
- 团队协作中，“success”比“green”更明确表达意图
- 无障碍场景下，屏幕阅读器不会读颜色，但能感知语义（配合
aria-live或role="status"更稳妥）
例外情况：当颜色本身是设计语言的一部分（如品牌色 brand-primary），且和业务状态无关时，才考虑视觉命名，但需在项目文档里显式约定。
立即学习“前端免费学习笔记（深入）”；
多个修饰符共存时怎么写：顺序、组合与 CSS 优先级
多个修饰符可以同时存在，比如 badge badge--success badge--sm，但要注意：
- 修饰符之间无依赖关系，CSS 规则要独立可叠加（别写
.badge--success.badge--sm这种联合选择器） - 尺寸修饰符（
--sm、--lg）建议放在颜色修饰符之后，符合“类型→状态→尺寸”的阅读习惯 - 避免过度组合：不要出现
badge--success--sm--outline这种长链式命名，那是元素（__）该干的事
正确示例：
<span class="badge badge--warning badge--sm">Beta</span>
动态渲染时怎么安全加修饰符：JS 拼字符串的风险
直接拼 "badge badge--" + status 很危险——status 若含空格、特殊字符或未定义，就会生成非法类名。更稳的做法是：
- 用白名单校验：
["success", "warning", "error", "info"].includes(status) - 服务端模板（如 Nunjucks / Jinja）用
class="badge badge--{{ status|default('info') }}"，并确保status字段已过滤 - 前端框架中优先用绑定语法（Vue 的
:class、React 的clsx库），避免手动拼接
最常被忽略的一点：后端返回的 status 值可能带空格或大小写混乱（如 "Success"），BEM 修饰符必须全小写、短横线分隔，这部分清洗逻辑不能漏。
