vue组件bem的block名必须与文件名严格1:1对齐（如usercard.vue→user-card），这是硬约束而非建议；错配将导致ide跳转失效、stylelint校验失灵、devtools无法定位样式，且scss嵌套、动态类名、::deep()穿透等均须以此为前提规范使用。
Vue组件里BEM的Block名必须和文件名1:1对齐
这是所有问题的起点，不是建议而是硬约束。UserCard.vue → Block名只能是user-card，不是card、userCard或UserCard。一旦错配，IDE跳转失效、stylelint校验失灵、新成员在DevTools里搜user-card__header根本找不到定义位置。
常见翻车点：
- 文件重命名为
UserProfile.vue后，SCSS里还留着.user-card { }，语义链当场断裂 - 模板中写
class="__header"或class="card__header"——前者是孤儿类，后者Block错位，scoped生成的data-v-xxx属性不会注入到这些元素上 - 多人协作时混用命名：有人按功能叫
order-item，有人按文件叫order-summary-item，结果同一业务域出现多个Block，scoped完全无法区分归属
SCSS嵌套必须防编译出非法BEM选择器
BEM不认层级，只认类名结构。SCSS的&是字符串拼接器，它不理解BEM规则，一写错就产出违反语法的选择器，比如.user-card--compact__header——修饰符不能直接修饰元素。
安全写法：
-
.user-card { &--compact { padding: 8px; } &__header { color: #333; } }→ 编译为.user-card--compact和.user-card__header✅ -
.user-card { &--compact &__header { padding: 6px; } }→ 编译为.user-card--compact .user-card__header✅（合法，靠空格连接） -
.user-card { &--compact { &__header { } } }→ 编译为.user-card--compact__header❌（非法）
Modifier作用于Element时，必须写成&__header--large，而不是&__header &--large——后者会生成两个独立类，但语义上--large本应属于__header这个Element。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
动态类名必须静态声明完整前缀才能被scoped识别
Vue的scoped依赖静态类名分析。运行时拼接字符串，如:class="'user-card--' + status"，会导致data-v-xxx属性无法注入，样式要么全局泄漏，要么完全不生效。
正确做法：
- 用工具函数封装：
cnUserCard({ compact: isCompact, disabled: isDisabled })返回['user-card', 'user-card--compact', 'user-card--disabled']，再交由clsx()合并 - 禁止在
clsx()里传未声明的动态片段：clsx('user-card', `user-card--${dynamic}`)❌——stylelint-selector-bem-pattern会失效，IDE也无法补全 - computed或工具函数返回的类名，必须确保字符串值含完整Block前缀，例如
getClassName('avatar')应返回'user-card__avatar'，而非'__avatar'
::deep()穿透必须绑定在BEM容器内，不能裸写
单独写::deep(.el-button)等于开了个全局后门，它会匹配当前组件内所有el-button，哪怕来自不同业务模块。Teleport场景下scoped天然失效，此时更不能依赖穿透。
正确姿势：
- 模板中用BEM容器包裹：
<div class="user-card__action-btn"><el-button>编辑</el-button></div> - 样式中仅穿透该容器下的目标：
.user-card__action-btn :deep(.el-button) { height: 32px; } - Teleport弹窗等脱离原DOM树的场景，应改用全局BEM样式，且Block名需全局唯一（如加业务前缀
salesforce-modal），Element/Modifier显式声明，避免依赖:deep()
最易被忽略的是修饰符的组合方式：别写user-card__item--large--focused这种双修饰符，应拆成两个class：user-card__item--large user-card__item--focused——BEM不支持连写修饰符，CSS层叠和可维护性都会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
