BEM类名冲突源于Block边界失守而非命名重复；必须确保每个组件独占语义化Block名，杜绝泛用.card等通用名，并通过工具链（如stylelint、BEM Tools）和工程规范（目录隔离、禁止:global滥用）强制落地。
Vue组件中BEM类名重复，根本不是“名字撞了”，而是块（Block）边界没守牢——user-card和profile-card本该互不相认，但一旦有人手写.card__title或漏掉Block前缀，冲突立刻生效。
为什么.card__title会覆盖.user-card__title
BEM类名不靠长度防冲突，靠归属锁定。浏览器只认选择器字面量：.card__title和.user-card__title是两个完全不同的类，不会互相覆盖；但如果你在多个组件里都写了.card__title，那它们就是同名类，后加载的CSS必然覆盖前面的——这跟BEM无关，是CSS全局作用域的铁律。
- 错误源头常是：把
card当通用块名复用，而非每个组件独占一个语义化Block（如user-card、product-card） - Vue单文件组件的根元素类名必须是唯一Block名，不能是
.card这种泛称 - 子组件若也叫
card，就该拆成独立Block，而不是塞进父组件命名空间（禁止user-card__card__header）
Vue中BEM类名拼接容易踩的坑
JS动态拼className时，手写字符串是最常见爆雷点：空格遗漏、连字符错位、大小写混用，在CI环境（Linux）下直接失效。
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- ❌ 危险写法：
className={`user-card__title ${isLarge ? 'user-card__title--large' : ''}`}（缺空格、无防错） - ✅ 推荐用
clsx：clsx('user-card__title', isLarge && 'user-card__title--large') - 更稳做法：封装BEM工厂函数，比如
bem('user-card', { title: true, large: isLarge })，返回数组自动处理分隔 - 注意：Vue模板中用
:class绑定时，同样适用clsx或对象语法，别硬拼字符串
如何让BEM在Vue项目里真正落地不退化
光靠人自觉不行，得靠工具链卡住关键节点。BEM退化往往发生在“看起来像”的瞬间——比如search-form__input_error少个短横，或button--primary缺Block前缀。
立即学习“前端免费学习笔记（深入）”；
- 接入
stylelint-selector-bem-pattern插件，强制校验block__element--modifier格式，CI中失败即阻断 - VS Code装
BEM Tools插件，输入user-card__自动补全元素，user-card--自动补全修饰符 - 目录结构必须对齐：每个Block对应一个文件夹（
src/components/user-card/），所有.user-card*类只出现在这个目录下 - 禁止
:global()滥用：哪怕用了<style scoped>，一旦写:global(.user-card__title)，就等于主动撕开隔离墙
最易被忽略的其实是Block边界的模糊——不是类名写错，而是开发者不确定“这个标题到底属于哪个Block”。BEM的约束力不在语法，而在每次写__前，你得能指着代码说清：“它归user-card管，不是profile-card，也不是card”。
