vue 2中bem核心是类名严格对应.vue文件名（如usercard.vue→user-card），确保ide跳转、stylelint校验与语义可读；scss嵌套需合规，动态类名须静态声明，穿透样式须限定bem容器。
Vue 2 组件中 BEM 类名设计，核心不是“怎么写好看”，而是让每个类名能被 IDE 跳转、被 stylelint 校验、被新成员一眼看懂归属——user-card__header 必须指向 UserCard.vue，否则就失去 BEM 的意义。
Block 名必须与 .vue 文件名严格一致（小写+短横线）
这是整个 BEM 结构的锚点，不是风格选择，是协作底线。Vue 2 不支持自动推导，全靠人工对齐。
-
UserCard.vue→ Block 名只能是user-card，不能是card、userCard或ucard -
PDFViewer.vue→ 必须转为pdf-viewer（大小写和数字统一处理） - 文件重命名后，所有模板中的
class和 SCSS 中的.user-card块声明都必须同步改，漏一处就会断掉语义链
SCSS 嵌套中 & 的用法必须匹配 BEM 语法
Vue 2 + Sass 的组合下，& 是字符串拼接器，不理解 BEM 规则。一写错，就产出非法选择器，比如 .user-card--compact__header —— 这违反 BEM，修饰符不能直接修饰元素。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ✅ 正确：
.user-card { &--compact { padding: 8px; } &__header { color: #333; } }→ 编译为.user-card--compact和.user-card__header - ❌ 错误：
.user-card { &--compact { &__header { } } }→ 编译为.user-card--compact__header，无效且无法被stylelint-selector-bem-pattern识别 - 修饰符作用于 Element 时，必须写成
&__header--large，而不是&__header &--large
动态类名必须静态声明，避免 class="user-card--" + variant
Vue 2 的 scoped 依赖静态类名分析。运行时拼接的字符串，vue-loader 无法注入属性选择器，样式会失效或泄漏。
- ✅ 正确：
:class="['user-card', { 'user-card--disabled': isDisabled, 'user-card--loading': isLoading }]" - ❌ 错误：
:class="'user-card--' + status"或className='user-card__icon--' + size - 复杂场景推荐用
clsx：:class="clsx('user-card', { 'user-card--highlighted': isHighlighted })"，它生成的是数组/对象，仍属静态结构
穿透子组件样式时，必须用 BEM 容器限定范围
Vue 2 中 /deep/ 或 ::v-deep 是唯一穿透手段，但滥用等于放弃隔离。关键不是“能不能改”，而是“改得有没有上下文约束”。
- ❌ 危险：
::v-deep(.el-button) { color: red; }→ 全局污染，且脱离user-card上下文 - ✅ 安全：
::v-deep(.user-card__submit-btn .el-button)，或更优：在子组件根元素加class="user-card__submit-btn"，父组件只写.user-card__submit-btn - 第三方组件（如
el-input）若需定制，优先通过class透传到其根节点，而非穿透内部结构
BEM 在 Vue 2 里最难的不是语法，而是每次敲下 __ 或 -- 时，得确认这个类是否真属于当前组件、是否能在不看 DOM 结构的情况下被理解——一旦依赖层级或位置，就已偏离 BEM 的初衷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
