Vue组件名转BEM Block名必须严格对应.vue文件名，小写短横线格式，禁止缩写、驼峰或丢词，如UserCard.vue→user-card、OrderSummaryItem.vue→order-summary-item，确保DevTools可跳转、协作可追溯。
Vue组件名怎么转成合法BEM Block名
Block名必须和.vue文件名严格一致，小写+短横线，不能缩写、不能驼峰、不能丢词。这不是风格偏好，是调试和协作的硬性门槛。
- UserCard.vue →
user-card✅（哪怕叫user-card比card长，也得保前缀唯一） - OrderSummaryItem.vue →
order-summary-item✅（不是order-item，否则搜order-item会漏掉这个组件） - SearchBar.vue →
search-bar✅（不是searchbar或searchBar）
一旦命名不一致，DevTools里点类名跳不到对应.vue文件，协作时查不到归属，重构时不敢动——这是最常被忽略却代价最高的起点错误。
Sass嵌套中哪些&写法会产出非法BEM选择器
&只是字符串拼接工具，它不理解BEM规则。一不留神就生成.user-card--compact__header这种违反BEM语法的选择器（修饰符不能直接修饰元素）。
-
.user-card { &--compact &__header { } }→ 编译为.user-card--compact .user-card__header✅ -
.user-card { &--compact { &__header { } } }→ 编译为.user-card--compact__header❌ -
.user-card { &__header { &--large { } } }→.user-card__header--large✅（修饰符作用于Element合法） -
.user-card { &__header { &--large &--focused { } } }→.user-card__header--large--focused❌，应拆成两个独立class
这类错误在Sass编译时不会报错，但审查元素时看到的类名根本不符合BEM语义，后续用stylelint-selector-bem-pattern校验会直接失败。
立即学习“前端免费学习笔记（深入）”；
为什么clsx比手拼字符串更适合动态BEM类名
手写className={`${base} ${size ? base + '--' + size : ''}`}极易漏空格、重复类、顺序错乱，IDE无法跳转，重构改名时还会漏掉某处拼接逻辑。
- 推荐封装函数：
cnButton({ size: 'large', variant: 'primary' })→ 返回['button', 'button--large', 'button--primary'] - 再交由
clsx合并：:class="clsx(cnButton(props))"，安全、可静态分析、不破坏source map - 禁止在
clsx里传未声明的动态片段：clsx('button', `button--${dynamic}`)❌——这会让stylelint-selector-bem-pattern失效，也失去IDE补全
动态类名一旦脱离预定义键值对，就等于把BEM语义交给运行时拼接，调试时DevTools看到的类名和源码完全对不上，hydration mismatch风险陡增。
老项目落地BEM时最容易踩的兼容性坑
老项目里满屏.clearfix、.text-center实用工具类，强行重命名会引发连锁样式崩坏；Ant Design、Element Plus等组件库默认类名也不符合BEM，硬套会增加覆盖成本。
- 不要全局替换
.btn→my-button，先从新组件切入，确保user-card、product-list等高频组件优先落地 - 第三方组件库的类名保持原样，用
:deep(.el-button)或:global()局部覆盖，避免污染全局 - 工具链必须跟上：CI中跑
npx stylelint "**/*.{scss}"，配置stylelint-selector-bem-pattern自动拦截.header .logo或.btn-primary等违规写法
BEM不是一次性的命名改造，而是让每个类名自带归属、角色、状态三重语义。真正卡住落地效果的，往往不是写法本身，而是没人检查、没人报错、没人回滚的流程缺口。
