BEM本身不解决引入问题，它只管类名结构；真正决定模块能否不打架的，是文件组织+构建时依赖顺序+作用域控制三者配合。
直接说结论：BEM本身不解决引入问题，它只管类名结构；真正决定模块能否不打架的，是文件组织 + 构建时依赖顺序 + 作用域控制三者配合。光写对 card__title 没用，card.css 被后加载或被全局 .btn 覆盖，照样炸。
如何让每个BEM模块真正“独立”不污染全局
BEM的“块”必须对应物理文件边界，而不是逻辑想象。一个 product-card 块，就得有且仅有一个 /components/product-card/product-card.module.css（或 .scss），里面只出现 .product-card、.product-card__price、.product-card--featured 这类选择器。
- 禁止跨模块引用：不要在
product-card.css里写.header__logo或@import "../header/header.css" - 禁止无命名空间的工具类混入：像
.u-text-center这类通用工具类，必须单独抽成utils.css并严格放在所有 block 文件之前加载 - 构建时启用 CSS Modules（如 Vite 的
.module.css）可自动哈希类名，但要注意 SSR 场景下动态拼接 class 时不能漏掉生成的哈希值，比如className={`${styles['product-card__button']} ${isDisabled ? styles['product-card__button--disabled'] : ''}`
为什么按字母序引入CSS会出事——引入顺序必须人工控制
Webpack/Vite 默认按依赖图解析顺序加载 CSS，但 BEM 模块之间没有显式依赖关系，很容易导致 layout.css 先于 base.css 加载，结果 .section .btn 把 .btn--primary 的背景色干掉了。
- 强制用数字前缀控制顺序：
00-reset.css→10-base.css→20-utils.css→30-layout.css→40-components.css - 禁用所有
@import：它把顺序决策权交给了 CSS 解析器，不可控；全部改用构建工具的import语句或 HTML 中显式<link>标签 - 关键修饰符（如
--disabled）若实在怕被覆盖，可用属性选择器提权：[class*="--disabled"]比单纯靠顺序更可靠，也比滥用!important更可维护
SCSS嵌套时怎么避免写出反BEM代码
开发者常以为 &__title { & a { ... } } 是省事，其实它编译出的是 .card__title a —— 这个 a 已脱离命名空间，成了全局链接样式。
立即学习“前端免费学习笔记（深入）”；
- SCSS 中只允许
&__xxx和&--xxx，禁止& a、& > div、& .icon这类写法 - 用
stylelint-selector-bem-pattern插件实时报错，比 Code Review 更早拦截 - 如果真需要复用某段样式（比如所有标题的字体），抽成
@mixin title-style()，而不是靠选择器继承
最易被忽略的一点：BEM 的 block 名不是随便起的，它得和组件文件路径、React 组件名、甚至后端 API 路由前缀对齐。比如 /api/v1/products → ProductList 组件 → product-list 块。不统一，协作时查个样式要跳三个地方。
