SPA中不加BEM易样式打架，因其多个组件常共存于同一DOM区域，泛名如.title或.btn会因加载顺序或权重相互覆盖；BEM通过block__element--modifier命名显式声明作用域，使user-card__title等类名天然绑定对应组件，从源头隔离冲突。
为什么 SPA 里不加 BEM 就容易样式打架
单页应用里，多个组件常被动态挂载到同一 DOM 区域（比如 #app），Header、UserCard、DashboardSidebar 都可能同时渲染。如果都用 .title 或 .btn 这类泛名，CSS 规则会按加载顺序或权重覆盖——你改了 UserCard 的 .btn，结果 DashboardSidebar 的按钮颜色也变了，但控制台查不到关联。
BEM 不是“多写几个下划线”，而是用命名本身声明作用域：user-card__title 天然绑定到 UserCard 组件，dashboard-sidebar__btn 彼此绝缘。冲突不是靠选择器优先级压，而是从源头隔离。
block 名必须和组件名严格对齐
这是最容易偷懒翻车的点。有人把 Vue 组件叫 UserProfile.vue，却给根元素写 class="profile" 或 class="user"；React 里组件名是 SearchForm，但 CSS 类写成 .search ——这直接断掉 BEM 的语义链。
-
user-profile是 block 名的唯一合法形式（全小写、连字符分隔），对应组件文件名和逻辑边界 - 元素必须用
user-profile__avatar，不能简写为profile__avatar或user__avatar - 修饰符如
user-profile--loading，不是user--loading，否则无法区分是整个组件状态，还是某个子元素状态
嵌套组件不跨 block 命名
Modal 组件里放一个 Button，Button 仍应使用自己的 block 名 button，而不是写成 modal__button。BEM 不是 DOM 树映射，而是模块边界映射。
立即学习“前端免费学习笔记（深入）”；
常见错误：
- 在
modal组件模板里给按钮写class="modal__button"——这违反 BEM，按钮应该保持button+ 自身修饰符 - 用
scoped的 Vue 单文件组件时，button子组件插入的 slot 内容不会自动带上data-v-xxx属性，导致样式漏出 ——此时必须让子组件自己声明 BEM 类，不能依赖父组件包裹 - 第三方库（如 Element Plus）的
el-button已按 BEM 实现，不要强行套一层modal__el-button，而是通过其原生修饰符（如el-button--small）控制
构建配置和 CSS 作用域必须兜底
BEM 类名写对了，样式照样跑飞，大概率卡在这三处：
- Webpack 项目开了
mini-css-extract-plugin，它默认把所有 CSS 提取为全局样式 —— 必须关掉提取，或配置css-loader的modules: false保证 BEM 类名不被哈希化 - 用了
:global(.button)却忘了删掉同文件里其他非 global 的声明，造成一半生效一半失效 - PostCSS 插件如
postcss-nested误把.card__title { .icon { ... } }编译成.card__title .icon（后代选择器），而 BEM 要求所有样式平级定义，禁止嵌套生成层级选择器
真正难的不是写对 __ 和 --，而是让整个工具链尊重这个契约：类名即作用域，不靠选择器深度，不靠属性选择器，不靠运行时注入 —— 它脆弱，但一旦立住，就不用再猜“这个样式到底从哪来”。
