不该叫 product-card__badge，它应是独立 block badge，因可复用、有多种状态变体、存在于多场景；正确命名如 badge--on-sale，位置由父容器控制，仅强耦合专用时才用 product-card__badge。
促销角标该不该叫 product-card__badge
不该。它大概率是独立 badge Block，而不是 product-card 的 Element。
判断标准很简单：删掉 product-card，这个角标还能不能单独存在、有没有自己的变体（比如颜色、尺寸、状态）、会不会用在商品列表、购物车、收藏夹甚至弹窗里？如果答案是“能”，那它就不是 Element，而是 Block。
- 常见错误：
product-card__badge看似顺理成章，但一旦你在购物车里也加角标，就得写cart-item__badge，两个类名逻辑重复、样式难复用、维护时要改两处 - 正确做法：统一用
badge作为 Block 名，靠 Modifier 表达差异 ——badge--on-sale、badge--new、badge--in-stock - 若需限定上下文（比如只在卡片右上角定位），用额外的布局类或属性控制，而不是塞进命名里：
product-card__corner容器 +badge badge--on-sale
badge 作为 Block 时，怎么和父容器对齐？
BEM 不负责定位，只管命名边界。角标的位置、偏移、层级由父容器的 CSS 控制，比如 product-card 内部用 position: relative，badge 用 position: absolute; top: 0; right: 0;。
关键点是：不要为了“看起来在卡片里”就妥协命名结构。BEM 的封装性来自类名归属，不是 DOM 嵌套深度。
- 禁止写
product-card__badge--top-right—— 这混淆了“状态”和“位置”，Modifier 应表达业务意图（--on-sale），不是视觉坐标 - 允许组合使用：
product-card__corner badge badge--on-sale，三个类名各司其职：容器定位、组件本身、业务状态 - 如果角标在不同场景下需要微调（如弹窗里字号更小），用
badge--compact这类语义化 Modifier，而不是写modal__badge
什么时候才该用 product-card__badge？
只有一种情况：这个角标完全不具备复用性，且样式/行为强耦合于当前卡片 —— 比如某活动页专属的、带动态描边动画+倒计时的角标，只出现在这一种卡片里，其他地方绝不会用，也没有抽象成通用组件的计划。
即便如此，也要警惕：这种“临时专用”组件往往半年后变成高频复用模块，而那时 product-card__badge 已经散落在七八个文件里，改起来比重写还费劲。
- 真正稳定的 Element 必须满足：离开
product-card就无法渲染、无独立样式、无 JS 行为、不出现在任何其他上下文 - 只要它出现过两次以上（哪怕只是设计稿里画了两处），就该升为 Block
- SCSS 中别用
&__badge嵌套生成 —— 手动写.badge更可控，也更容易被搜索和重构
角标这类高频复用 UI 片段，名字越短、越独立，后期越省事；硬塞进父级命名里，省的是三秒打字时间，赔的是三个月排查样式泄漏的工时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
