全局样式不该进 bem 块文件。bem 的 block.css 仅负责结构、布局及组件内元素关系，重置、字体、颜色变量和工具类应由 _reset.css、_base-typography.css、_utilities.css 和 _theme-vars.css 四类带下划线前缀的基础文件统一管理，并在所有 bem 块 css 前加载。
全局样式该不该进 BEM 块文件
不该。BEM 的 block.css 文件只负责结构、布局和组件内元素关系，不承担重置、字体、颜色变量或通用工具类职责。一旦把 body { margin: 0 } 或 .text-center 塞进 nav.css，就等于把基础规则和业务逻辑耦合，后续换主题、抽离 UI 库、做 SSR 样式隔离都会卡住。
常见错误现象：
- 在
button.css里写font-family: var(--font-primary)—— 字体应由_base-typography.css统一声明 - 给
modal__overlay加z-index: 9999—— z-index 层级必须由_zindex.css全局定义，否则多个弹窗叠加顺序失控 - 在
form.css中写input:focus { outline: 2px solid #007bff }—— 焦点样式属于基础交互规范，不是表单块的专属行为
哪些 CSS 文件属于“非 BEM”基础层
真正该独立于 BEM 的只有四类文件，且命名需带下划线前缀以示区分：
-
_reset.css：仅含 normalize / reset 规则，无类名 -
_base-typography.css：定义html字体缩放、body行高、h1–h6默认样式 -
_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) } 取不到值。
第三方 UI 库怎么和 BEM 共存
直接覆盖 .el-button 或 .ant-btn 类是危险操作——库升级后样式崩、无法复用 BEM 修饰符、调试时 class 列表爆炸。正确做法是封装一层 BEM 块容器：
<div class="my-button"> <el-button class="my-button__inner" :type="type"></el-button> </div>
对应样式只写：
.my-button__inner {
/* 调整尺寸/边距等，不碰颜色、字体 */
}
.my-button--large .my-button__inner {
padding: 12px 24px;
}
关键点：
- 第三方组件只作为子节点存在，不参与 BEM 命名体系
- 所有视觉定制通过 wrapper 类 +
__inner子选择器完成 - 禁止在
_theme-vars.css里覆盖第三方库的 CSS 变量（如--el-color-primary），那属于库自身主题机制，应走其官方主题方案
BEM 块里引用基础变量的边界在哪
可以安全使用 var(--color-primary)、var(--spacing-sm) 这类原子变量，但不能依赖组合变量或带逻辑的 CSS 变量，比如：
- ✅ 安全：
background-color: var(--color-surface); - ❌ 危险：
border: 1px solid var(--color-border-hover);—— hover 是状态，应由 BEM 修饰符控制，而非靠变量名隐含行为 - ❌ 危险：
font-size: var(--font-size-heading-lg);—— heading 是语义层级，BEM 块内应统一用--font-size-lg这类中性尺寸变量
最易被忽略的一点：基础变量文件本身不能有媒体查询。响应式断点、暗色模式切换等逻辑，必须由 BEM 块自己通过 @media 或 @supports (prefers-color-scheme) 实现，否则会破坏块的可移植性 —— 你没法保证每个项目都用同一套断点配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
