基础层 reset.css 或 base.css 绝对不能出现任何 bem 块名或业务语义类，因其唯一任务是消除浏览器差异、定义全局最小公约数，如 box-sizing: border-box、a{text-decoration:none}；一旦写入 .btn 等类名，就会污染全局、干扰第三方组件，并违背“与业务逻辑无关”铁律。
基础层 reset.css 或 base.css 里绝对不能出现任何 BEM 块名（如 .header、.btn）或业务语义类，否则会污染全局、干扰第三方组件，且违背“最小公约数”原则。
为什么 reset.css 里写 .btn 是危险操作
浏览器不区分你写的 .btn 是来自 Ant Design、Element Plus 还是你自己的 reset.css——只要它在样式表中更早声明或权重更高，就会直接覆盖第三方按钮的 padding、border、font 等。常见现象包括：Ant Design 按钮变蓝、react-modal 遮罩层被撑开、el-input 边框消失。这不是 BEM 写得不够规范的问题，而是基础层越界了。
根本原因在于：reset 的任务是消除浏览器差异（比如 button, input { font: inherit }），不是统一业务样式。一旦你加了 .btn { padding: 8px 16px; }，它就不再是 reset，而是偷偷混入的业务规则。
哪些文件属于真正的“非 BEM”基础层
只有四类文件可独立于 BEM 架构存在，且必须用下划线前缀标识：
-
_reset.css：仅含 normalize/reset 规则，禁止任何类选择器 -
_base-typography.css：定义html字体缩放、body行高、h1–h6默认样式 -
_utilities.css：纯功能类（如.u-mt-4），禁止含语义（不能叫.u-nav-spacer） -
_base.css：可封装全局继承规则（如a { text-decoration: none }），但所有选择器只能是标签、属性、伪类或通配符
注意：_base.css 不等于 base-button.css——后者已是业务块，应归入 components/button/ 目录并严格使用 BEM 命名。
如何安全地复用重置逻辑而不污染全局
想让所有表单控件继承字体？别写 .form-control { font: inherit }，改用 Sass @mixin：
@mixin form-reset {
font: inherit;
box-sizing: border-box;
}
input, select, textarea {
@include form-reset;
}
这样既复用了逻辑，又没引入新类名。如果真需要全局类（比如为旧项目过渡），用 base- 前缀而非 b-，例如 .base-button，并在构建时确保它通过 @import 或 injectGlobal 在所有组件样式之前载入。
BEM Block 里为什么不该重复写 box-sizing: border-box
你在 .search-form__input { box-sizing: border-box; } 里再写一遍，本质是重复基础层该干的事。隐患在于：某天基础层升级为 box-sizing: content-box（虽少见但可能），你的输入框宽高会突然错乱。BEM Block 只负责视觉表现与交互反馈，不负责修复浏览器默认行为。
真正该出现在 Block 里的，是明确上下文相关的具体值，比如：.card__title { font-size: 1.25rem; }；而基础层只用继承值、无固定尺寸、少用绝对值。
最易被忽略的一点：CSS 层叠优先级由 @layer 声明顺序 + 选择器权重共同决定。如果你把 BEM 块样式写在 @layer base 之前，哪怕它在另一个文件里，也会被基础层规则覆盖——因为后声明的层优先级更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
