bem本身不提升可移植性，真正起作用的是块级命名隔离、禁用后代选择器、修饰符仅作用于块根；只要类名带明确block前缀、样式全靠单类名匹配、不依赖父容器结构，组件即可跨项目复用。
直接说结论：BEM 本身不提升可移植性，真正起作用的是「块级命名隔离 + 禁用后代选择器 + 修饰符仅作用于块根」这三件事。只要类名带明确 block 前缀、所有样式都靠单类名匹配、不依赖父容器结构，组件就能复制粘贴到任意项目里不崩。
为什么 .card .title 复制到新项目就失效
这类选择器把样式逻辑隐式绑在 DOM 层级上。比如你写 .card .title，浏览器实际匹配的是“任意 .card 元素内部、任意嵌套深度的 .title”。一旦新项目里有个 .profile-card 也用了 .title，或者父容器 class 名是 .card-wrapper 而不是 .card，样式就断了或误击。
而 .card__title 是独立类名，只认自己，不看爹妈是谁。复制过去，只要 HTML 里真有这个 class，样式就生效。
- 常见错误现象：
.modal .close→ 改成.modal__close，且 modal 根元素必须带.modal - 子元素不能漏掉块前缀：禁止
.btn__icon和.icon混用，后者是独立 block，前者是 btn 的一部分 - 别指望预处理器自动补全：SCSS 中
.card { &__title { } }编译出来是.card .card__title（注意空格），这不是 BEM，是后代选择器
怎么让 button--primary 在新项目里不被 Ant Design 覆盖
第三方库（如 Ant Design、Element Plus）的类名（.el-button、.ant-btn）通常带全局权重，且可能用 !important 或宽泛选择器（如 button[disabled]）。直接覆盖风险高，升级即崩。
正确做法是封装一层 wrapper，用 BEM 控制边界：
<div class="my-button"> <el-button class="my-button__inner">提交</el-button> </div>
-
.my-button是你的 block，负责尺寸、间距、状态（.my-button--loading） -
.my-button__inner只做最小干预：透传 disabled、调整 vertical-align，不碰颜色/边框 - 所有 CSS 规则只写
.my-button和.my-button__inner，不出现.el-button - 避免在 wrapper 上加
!important，靠 specificity 和加载顺序控制优先级
修饰符挂错位置导致跨项目复用失败
BEM 的 modifier（如 --large、--disabled）必须作用于 block 根，而不是子元素。否则在新项目中，别人调用时只加了 .button--large，但你样式却写在 .button__text--large 上，根本不会生效。
典型反例：
- ❌
.button__text--large：文字变大不该由子元素承担，应由.button--large统一缩放整个按钮 - ❌
.button--primary .button__icon：这是后代选择器，破坏 BEM 原则；应写.button--primary .button__icon→ 改为.button--primary .button__icon？不对——正确是直接给 icon 加修饰符：.button__icon--primary，但前提是它语义上属于 button 变体；否则应抽成独立 block.icon--home - ✅ 正确模式：
.button.button--large控制整体尺寸，.button.button--disabled控制禁用态，所有子元素通过继承或重置响应
最常被忽略的一点：BEM 类名不是装饰，是契约。一旦定下 user-card__avatar，就意味着 avatar 必须是 user-card 的视觉组成部分；如果它在弹窗、侧边栏、用户列表里都独立存在，那它就该是 avatar 块，而不是某个块的子元素。跨项目复用的前提，是先想清楚这个 UI 片段到底“是什么”，而不是“它在哪”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
