vue项目中bem核心是类名自带上下文归属，block名必须与.vue文件名严格一致（小写短横线），如usercard.vue→user-card；禁止缩写、驼峰或丢词；模板中所有类名须以block为前缀；sass嵌套需避免非法语法；推荐用clsx封装函数处理动态类名；落地应从新组件切入并逐步重构，确保devtools可跳转对应文件。
Vue项目里用BEM，核心不是“加个规范”，而是让每个类名自带上下文归属——user-card__header 一眼可知它属于 UserCard.vue，而不是靠猜或翻父组件。
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） - 模板中所有类名必须以该Block名为前缀：
user-card__header✅，__header❌（孤儿类），card__header❌（错配Block）
Sass嵌套时哪些&写法会产出非法BEM选择器
&只是字符串拼接工具，它不理解BEM规则。一不留神就生成.user-card--compact__header这种违反BEM语法的选择器（修饰符不能直接修饰元素）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
.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无法跳转，重构改名时还会漏掉某处拼接逻辑。
- 推荐封装函数：
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最不伤筋动骨的方式
别全局搜替.btn→.button，那会炸掉JS绑定、CSS动画、测试断言。真正可行的是“新功能+样式修改”场景切入：
- 新增一个组件（如
SearchResultCard.vue），从头用BEM：search-result-card、search-result-card__title - 已有组件做样式重构时，同步对齐BEM：比如给
DocumentItem.vue加个紧凑模式，就引入document-item--compact，而不是临时加.compact - 避免混合命名：
document-listing__document-item__image❌，要么是document-listing__item，要么是独立document-item，二者不可混用
最易被忽略的一点：BEM不是为了“看起来规范”，而是让DevTools里点一下类名就能跳到对应.vue文件——如果做不到这点，说明Block名没对齐、或用了泛义容器名（如container、section），得回头重审。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
