BEM能防止SPA中组件样式冲突，其核心是三段式命名block__element--modifier，必须包含组件名作为block前缀，且需规避构建配置、作用域声明及第三方库干扰。

为什么直接用组件名当类名在SPA里会出事

单页应用里多个组件可能渲染到同一页面，比如 Header 和 DashboardHeader 都用了 .title，样式就互相覆盖。BEM 不是炫技，是防这种“看不见的冲突”——类名带上模块前缀，让 CSS 选择器天然绑定到具体组件。

BEM 类名怎么写才不翻车

核心是三段式：block__element--modifier。重点不是记格式，而是别漏掉 block（通常就是组件名）：

• Button 组件的主类必须是 button，不是 btn 或 ui-button
• 按钮里的图标写成 button__icon，不是 button-icon（少一个下划线就不是 BEM）
• 禁用状态写成 button--disabled，不是 button-disabled 或 is-disabled
• 嵌套组件不跨块命名：Modal 里的 Button 仍用 button 开头，不要写成 modal__button

CSS 作用域没生效？检查这三处

BEM 类名写对了，但样式还是透出或冲突，大概率卡在这几个点：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 构建工具没关 CSS 提取（如 Webpack 的 mini-css-extract-plugin 默认全局注入）
• 用了 :global(.button) 却忘了删掉其他地方的 :local 声明
• 第三方 UI 库的样式没隔离，比如 ant-design 的 .ant-btn 直接干掉了你的 button
• Vue 的 和 BEM 混用时，button__icon 会被自动加属性选择器，但子组件如果用 slot 插入，外部传入的元素不会带这个属性

要不要用 CSS-in-JS 或 CSS Modules 替代 BEM

可以，但得清楚代价：

• styled-components 或 emotion 能彻底隔离，但服务端渲染时 class 名动态生成，SEO 友好性弱，调试时 devtools 看到的是 sc-fa9d45c1-0 这种
• CSS Modules 编译后类名哈希化，和 BEM 的语义化命名是两条路——BEM 让人一眼看懂结构，CSS Modules 让人一眼看不出结构
• 如果团队已有大量 BEM 命名习惯，强行切 CSS-in-JS 会导致组件库、文档、设计师标注全部脱节

真正容易被忽略的是：BEM 的价值不在“写法”，在于所有人在同一个命名契约下协作。一旦有人偷偷写 card-title，整个链路就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！