BEM本身不提升可移植性，真正起作用的是块级命名隔离、禁用后代选择器、修饰符仅作用于块根；只要类名带明确block前缀、样式全靠单类名匹配、不依赖父容器结构，组件即可跨项目复用。
直接说结论：BEM 本身不提升可移植性，真正起作用的是「块级命名隔离 + 禁用后代选择器 + 修饰符仅作用于块根」这三件事。只要类名带明确 block 前缀、所有样式都靠单类名匹配、不依赖父容器结构，组件就能复制粘贴到任意项目里不崩。
为什么 .card .title 一复制就失效
这类选择器把样式逻辑隐式绑在 DOM 层级上。浏览器匹配 .card .title 是从右往左找：先定位所有 .title，再往上查有没有 .card 祖先。一旦新项目里结构变成 <section class="product-card"><h3 class="title"></h3></section>，.title 就脱离了 .card 包裹，样式立刻断掉。
更隐蔽的问题是继承污染：.card 上设的 font-size 或 color 会透传影响 .title，但你根本没在规则里声明它，改起来像捉迷藏。
-
.card__title不依赖父容器是否存在，只要 HTML 里写了这个类，样式就生效 - 搜索
card__title就能准确定位全部相关样式，不用grep整个 CSS 文件找上下文 - 禁止松散组合，如
.card .title→ 必须改成.card__title
.btn__icon 和 .icon 什么时候该用哪个
关键看语义归属：如果 icon 是按钮内部不可拆分的一部分（比如提交按钮右侧的小箭头），用 .btn__icon；如果它是独立可复用的资源（比如关闭图标、用户头像图标），就该抽成原子块 .icon--close 或 .icon--user。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 把第三方组件的类名直接塞进 BEM 结构，例如
.ant-btn__icon—— 这违反块边界，ant-btn是别人家的 block，你不该侵入 - 跨 block 命名元素，例如
.card__button—— 如果 button 是独立 block，就不该被 card “拥有” - 混用命名风格：
.btn__icon和.icon同时存在，导致调用方无法判断哪个该复用、哪个必须绑定上下文
修饰符写在哪儿才不会跨项目失效
BEM 的 modifier（如 --primary、--disabled）必须作用于 block 根，而不是子元素。否则在新项目中，别人调用时只加了 <button class="btn--loading">，但你的样式却写在 .btn__text--loading 上，根本不会生效。
正确做法：
<button class="btn btn--loading"><span class="btn__text">提交中</span></button>- CSS 中只写
.btn--loading控制整体状态（禁用 pointer-events、调整 opacity），不碰.btn__text的内容 - 避免
.btn__text--loading这种写法 —— 它把状态逻辑下沉到 element 层，破坏了 block 的完整性
React/Vue 中动态生成类名容易踩的坑
用 clsx 或 classnames 拼接时，variant、size 等变量必须提前校验，否则可能产出 btn--undefined 或 btn-- 这种非法类名，样式静默失效。
实操建议：
- 定义常量前缀：
const BLOCK = 'btn';，避免硬编码散落 - 校验逻辑写在组件顶层，例如：
const mod = ['primary', 'secondary'].includes(variant) ? variant : 'primary'; - 禁止在 JSX 里手写
className="btn btn--large btn__icon"——btn__icon是 element，不能和 block modifier 并列写在同一个元素上
最常被忽略的点是：BEM 的复杂性不在语法，而在每次加新类名时，都要多问一句——“这个类脱离当前上下文，还能表达清楚自己是谁、属于谁、代表什么状态吗？”
