徽标角标（badge）应定义为 Block，而非 Element，因其可独立复用、样式逻辑一致且不依赖特定父结构；错误做法是将其作为父组件的 Element，如 .nav__item__badge。
徽标数角标（badge）该定义为 Block 还是 Element？
绝大多数场景下，.badge 应独立为 Block，而非某个父组件的 Element。比如导航项右上角的未读数、用户头像旁的在线状态、商品卡片右上角的“新品”标——它们在页头、弹窗、侧边栏、列表项里重复出现，样式逻辑一致，且不依赖特定父结构。
常见错误是写成 .nav__item__badge 或 .card__header__badge。这违反 BEM 核心原则：元素不能脱离块存在，而角标显然能单独复用。一旦某处需要把 .badge 挪到按钮右侧，就得重写类名和样式，耦合爆炸。
- ✅ 正确做法：统一用
.badge作为 Block，通过修饰符表达变体 - ❌ 错误信号：HTML 中只写
class="nav__item__badge"却没同时声明nav和nav__item - ⚠️ 特殊例外：仅当角标语义完全绑定于单一上下文（如“购物车徽标仅用于顶部工具栏”，且永不复用），才考虑
.toolbar__badge，但需同步评估是否真不可抽取
角标常见的修饰符命名该怎么选？
修饰符必须描述状态或可预期的视觉变体，而不是具体值或临时样式。比如 .badge--new 合理，.badge--red 就危险——换主题时得全局搜替换，违背语义化初衷。
- 推荐布尔型修饰符：
.badge--dot（纯圆点）、.badge--hidden（JS 控制显隐）、.badge--floating（脱离文本流定位） - 推荐键值型修饰符：
.badge--size-small、.badge--theme-inverted、.badge--position-top-right - 避免模糊词：
.badge--v2、.badge--top（位置应由布局容器控制，非 badge 自身职责） - 注意组合限制：
.badge--size-small--theme-inverted可行，但.badge--size-small__icon是非法写法（修饰符不能跨级挂到子元素）
如何与父容器协同定位而不破坏 BEM 隔离性？
BEM 不禁止定位，但禁止用后代选择器侵入父级结构。角标常需绝对定位到父容器右上角，这时不能写 .card .badge 或 .nav__item > .badge —— 这会让 .badge 样式强依赖父类，失去独立性。
立即学习“前端免费学习笔记（深入）”；
- ✅ 安全做法：让父容器主动“容纳”角标，例如加一个
position: relative的 wrapper 类.has-badge，再由.badge自己用position: absolute定位 - ✅ 更推荐：用属性选择器或数据属性辅助，如
[data-badge-position="top-right"]，比.card__badge更可控 - ❌ 禁止 SCSS 嵌套出后代选择器：
.card { .badge { top: 0; right: 0; } }会生成.card .badge，直接破坏 BEM 隔离 - ? 提示：若多个父容器都要支持角标，可抽象出
.badge-containerBlock，内部包含.badge-container__trigger和.badge-container__badge
React 中动态渲染角标时 classnames 怎么配才不翻车？
别在 JSX 里硬拼字符串，也别让组件内部 Block 名和外部传入不一致。比如父组件传 badgeType="unread"，但子组件却基于 "notification" 拼类名，最终生成的 .notification--unread 根本没对应样式。
- ✅ 统一源头：每个角标组件顶部定义常量
const BLOCK = 'badge'，所有类名派生自它 - ✅ 用
classnames收敛状态：className={cn(BLOCK, `${BLOCK}--${type}`, {[`${BLOCK}--hidden']: !visible})} - ✅ 复杂状态建议封装 hook：
useBadgeClasses({ type: 'unread', size: 'small', visible: true })返回完整 class 字符串 - ⚠️ 注意 SSR 一致性：服务端渲染时若
visible初始为 false，但客户端 JS 立即设为 true，可能触发 FOUC 或 hydration mismatch
.badge 本身就要承载语义、状态和复用性，后续命名和协作就顺了。 
