bem规范中徽标状态必须用--修饰符，如user-avatar__badge--new；禁止用-或_；状态名须对应业务逻辑而非视觉样式；多状态应独立定义、可叠加；内部图标与文字需并列子元素，禁用三层嵌套。
徽标状态必须用 -- 修饰符，不能写成 - 或 _
直接写 user-avatar__badge-new 或 user-avatar__badge_new 是错的——BEM 规范里只有 -- 是合法修饰符分隔符。单中划线会被识别为新 Block 名，下划线则无法被 PurgeCSS、PostCSS 插件等工具识别，容易在构建时误删。浏览器 DevTools 里也看不出这是“状态”，只会当成普通类名堆砌。
正确写法只有一种：user-avatar__badge--new、user-avatar__badge--vip、user-avatar__badge--online。这些类名必须和 HTML 中真实添加的 class 完全一致，JS 切换要用 classList.toggle()，别拼字符串。
user-avatar__badge 的修饰符只能描述业务状态，不能写视觉或位置
常见错误是把设计稿上的表现直接搬进类名：user-avatar__badge--red、user-avatar__badge--top-right。这类命名一换主题色或布局就崩：改个品牌色得全局搜 --red，加个右下角场景又得补 --bottom-right，很快变成命名泥潭。
-
user-avatar__badge--new✅ 对应「新用户」业务逻辑，可与 JS 的isNewUser变量直连 -
user-avatar__badge--vip✅ 映射到权限系统字段user.tier === 'vip' -
user-avatar__badge--online✅ 和 WebSocket 状态user.isOnline同步 -
user-avatar__badge--small❌ 尺寸不是状态，是响应式行为；该用user-avatar--compact传导
多个状态共存时，修饰符要独立声明，不写组合选择器
一个徽标可能同时是 --new 和 --vip，比如 VIP 新用户。这时候 CSS 规则必须彼此解耦，不能写 user-avatar__badge--new.user-avatar__badge--vip 这种组合选择器——它会导致样式爆炸、漏一个类就失效，且无法预测层叠顺序。
正确做法是每个修饰符单独定义视觉职责：
user-avatar__badge--new {
background: var(--badge-new-bg, #ffa502);
}
user-avatar__badge--vip {
background: var(--badge-vip-bg, #2c3e50);
}
user-avatar__badge--online {
box-shadow: 0 0 0 2px var(--badge-online-ring, #2ed573);
}
这样任意叠加都生效，也不依赖书写顺序。注意：所有变量都应在 :root 或组件级作用域定义，避免硬编码颜色值。
图标和文字必须拆成并列子元素，禁用三层嵌套
徽标内部若含图标 + 数字（如 ? 9），很多人会写成 user-avatar__badge__icon —— 这是典型三层嵌套，BEM 明确禁止。它会让语义断裂、调试困难，且破坏样式隔离。
正确结构只有两层：
-
user-avatar__badge：容器，负责定位、整体状态（如--new） -
user-avatar__badge-icon：并列子元素，承载 SVG 或字体图标 -
user-avatar__badge-text：并列子元素，承载数字或文字
它们之间没有父子修饰关系，所以不能出现 user-avatar__badge-icon--small。尺寸变化应由父容器 user-avatar--compact 统一传导，或通过 CSS 变量控制缩放比例。
--online 只影响外圈环，--new 只改背景，--vip 可能换图标——这些不能靠 JS 拼 class 控制，得靠一套清晰的映射表驱动渲染。否则很快就会有人在模板里写 class="... --new --vip --online" 却发现样式打架。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
