bem本质是将全局css划分为基础层（_reset.css等）与业务块（user-card.css等）两套隔离体系；基础层文件必须独立、带下划线前缀、禁止含业务类名，且须在所有bem块之前加载。
单页应用里用 BEM 管理全局 CSS，本质不是“给所有类加前缀”，而是把全局样式切成两套互不干扰的体系：一套是真正全局的基础层（_reset.css、_base-typography.css），另一套是带明确上下文的业务块（user-card.css、search-form.css）。混在一起写，BEM 就只剩形式，没实际隔离效果。
哪些 CSS 文件不该进 BEM 块？
基础层文件必须独立于任何 block，且命名带下划线前缀，确保构建时可识别、加载顺序可控：
-
_reset.css：只含normalize或reset规则，无类名、无变量、无媒体查询 -
_base-typography.css：定义html字体缩放、body行高、h1–h6默认样式，不出现.card__title这类业务类名 -
_utilities.css：纯功能类，如.u-mt-4、.u-flex-center，禁止含语义（不能叫.u-nav-spacer） -
_theme-vars.css：只含 CSS 自定义属性，如--color-primary、--spacing-md，不带任何选择器
这些文件必须在所有 BEM 块 CSS 之前加载。顺序错位会导致 nav__item { color: var(--color-primary) } 取不到值。
为什么 import './Button.css' 在组件里仍会全局生效？
Webpack 或 Vite 默认把 import 进来的 CSS 当作“全局样式”处理，哪怕它写在一个 React/Vue 组件文件里。BEM 类名（如 button__label）再规范，也挡不住这个 CSS 文件被抽成一个全局 main.css 后，影响所有页面。
- Vue 单文件组件要写
<style scoped></style>，否则.button__icon仍可能被外部规则通过属性选择器覆盖 - React 项目得配
css-loader?modules或直接用Button.module.css，让button__icon编译成类似button__icon_abc123的哈希类名 - 第三方 UI 库（如 Ant Design）的
import 'ant-design-vue/dist/reset.css'是全局的，不能靠 BEM 命名来“假装局部”
如何让 BEM 块真正不污染全局？
BEM 块文件本身不能包含基础层逻辑，否则就破坏了职责分离。常见错误包括：
- 在
button.css里写font-family: var(--font-primary)——字体应由_base-typography.css统一声明 - 给
modal__overlay加z-index: 9999——层级必须由_zindex.css全局定义，否则多个弹窗叠加顺序失控 - 在
form.css中写input:focus { outline: 2px solid #007bff }——焦点样式属于基础交互规范，不是表单块的专属行为 - 用
@import拼凑全局样式（如在某个页面里@import '@/assets/scss/bem.scss'）会导致作用域混乱、热更新失效；正确做法是在nuxt.config.ts或 Webpack 配置中统一通过css数组注入
第三方组件库怎么和 BEM 共存？
直接覆盖 .el-button 或 .ant-btn 是危险操作——库升级后样式崩、无法复用 BEM 修饰符、调试时 class 列表爆炸。正确封装方式是：
- 用 BEM 块容器包裹第三方组件：
<div class="my-button"><el-button class="my-button__inner"></el-button></div> - 样式只写
.my-button__inner和.my-button--large .my-button__inner，调整尺寸/边距等，不碰颜色、字体 - 禁止在
_theme-vars.css里覆盖第三方库的 CSS 变量（如--el-color-primary），那属于库自身主题机制，应走其官方主题方案 - 若需穿透样式边界（比如改
.ant-card的overflow），必须显式声明::global(.ant-card) { overflow: visible; }
最易被忽略的一点：BEM 解决的是命名冲突，不是作用域问题；CSS Modules 才真正把 .btn 编译成 _btn_abc123 这种哈希类名。没启用模块化，光靠 BEM 命名，.card__body 仍是全局符号，塌陷风险始终存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
