BEM类名必须与.vue文件名严格一致（小写+短横线），模板中所有类名须以该Block名为前缀；Sass中&嵌套需避免生成非法选择器；clsx可安全处理动态类名；老项目应通过新功能或样式修改渐进式落地BEM。
Vue组件里BEM类名怎么和文件名对齐
Block名必须和.vue文件名严格一致，小写+短横线，否则DevTools里搜不到对应样式，协作时容易认错归属。UserCard.vue → user-card，不是card或userCard；SearchBar.vue → search-bar，不能缩写成searchbar。
模板中所有类名必须以这个Block名为前缀：user-card__header✅，__header❌（孤儿元素），card__header❌（错配Block）。常见错误是把组件名当语义起名，比如OrderSummaryItem.vue写成order-item__summary，实际应为order-summary-item__summary——哪怕冗长，也要保前缀唯一可查。
Sass嵌套BEM时哪些&用法会产出非法选择器
Sass的&不是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
为什么clsx比字符串拼接更适合动态BEM类名
手写className={`${base} ${size ? base + '--' + size : ''}`}极易漏空格、重复类、顺序错乱，且IDE无法跳转、重构时改名会漏。而clsx配合封装函数能静态分析：
立即学习“前端免费学习笔记（深入）”；
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
cnButton({ size: 'large', variant: 'primary' }) → 返回['button', 'button--large', 'button--primary']，再由clsx安全合并。React或Vue里直接用:class="cnButton(...)"，不拼字符串，不破坏source map，也不影响stylelint-selector-bem-pattern校验。
注意：禁止在clsx里传入未声明的动态片段，比如clsx('button', `button--${dynamic}`)——这会让linter失效，也失去IDE自动补全能力。
老项目加BEM最安全的渐进式切口在哪
别全局搜替换.btn→.button，那会炸掉JS绑定和测试。真正可行的切口是“新功能+样式修改”场景：
- 新增一个组件，从头用BEM，比如
payment-form及其payment-form__submit - 修一个已有bug，比如调整
.modal .close的定位逻辑，顺手改成.modal__close并删掉后代选择器 - 清理无用类：用DevTools的“Computed”面板反查哪些
.left、.clear已无样式生效，批量删
第三方库类名（如el-button）不硬套BEM，改用其主题变量或容器限定范围：.my-page ::v-deep(.el-button) → 改为.my-page__content .el-button，保持BEM容器边界清晰。
BEM最难的从来不是语法，而是所有人持续用同一前缀、不省略__、不跨块组合——一旦有人开始写header-button，整个命名契约就从内部瓦解了。
