全局重置样式（_reset.css）等四类基础文件必须物理隔离、带下划线前缀且优先加载：_reset.css（仅浏览器重置）、_base-typography.css（基础排版）、_utilities.css（功能类）、_theme-vars.css（CSS变量），严禁在BEM组件中写全局规则或覆盖第三方组件样式。
全局重置样式（_reset.css）和 BEM 业务组件（如 button.css）必须物理隔离、加载顺序严格、职责完全不重叠——混在一起不是“风格不统一”，是架构级污染，后续换主题、抽离 UI 库、做 SSR 样式隔离全会卡住。
哪些文件算真正的“非 BEM”基础层，怎么命名和加载
只有四类文件可脱离 BEM 架构存在，且命名**必须带下划线前缀**，否则构建工具或协作中极易误用：
-
_reset.css：仅含浏览器差异消除规则，如button, input { font: inherit; }、* { box-sizing: border-box; }；禁止任何类选择器（.btn）、ID 选择器（#header） -
_base-typography.css：定义html字体缩放、body行高、h1–h6默认样式；不用固定font-size: 14px这类值 -
_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) } 取不到变量值。
为什么 _reset.css 里写 .btn 就会崩第三方组件
浏览器不区分类名来源。只要 .btn 在样式表中声明得更早、或权重更高，它就会无差别覆盖所有匹配元素——包括 ant-btn、el-button、甚至你自己未来写的 button--primary。
- 根本任务是消除浏览器差异，不是“顺手调个按钮样式”
- 一旦出现
.btn { padding: 8px 16px; }，它就不再是 reset，而是偷偷混入的业务规则 - 常见症状：全局按钮文字垂直居中失效、
textarea高度异常、第三方弹窗滚动条消失
BEM 块文件里写全局规则就是越界
button.css 或 nav.css 文件里塞任何不属于该块结构/布局/内部关系的规则，等于主动撕毁 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 }→ 焦点样式属于基础交互规范，不是表单块的专属行为
这类写法会让 button 不再是“可复用的按钮组件”，而成了“带字体、焦点、z-index 的耦合体”，换主题时改一个地方，八处崩坏。
第三方 UI 库怎么和 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，调整尺寸/边距等，不碰颜色、字体 - 关键点：第三方组件只作为子节点存在，不参与 BEM 命名体系；所有视觉定制通过 wrapper 类 +
__inner子选择器完成 - 禁止在
_theme-vars.css里覆盖第三方库的 CSS 变量（如--el-color-primary），那属于库自身主题机制，应走其官方主题方案
边界是否清晰，不取决于你写了多少注释，而取决于构建后生成的 CSS 文件里，_reset.css 是否真的一行类选择器都没有，以及 button.css 里有没有哪怕一个 body 或 a:hover 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
