基础层 reset.css 或 base.css 严禁出现任何 bem 块名（如 .button、.header），因其会无差别覆盖第三方组件样式，破坏架构边界；它唯一任务是消除浏览器差异，仅允许标签、属性、通配符等非业务选择器。
基础层 reset.css 或 base.css 里写任何 BEM 块名（如 .button、.header）就是错的，不是“不推荐”，是直接破坏架构边界——它会让 Ant Design 按钮变蓝、el-input 边框消失、react-modal 遮罩层被撑开。
为什么 reset.css 里出现 .btn 会引发第三方组件样式崩坏
浏览器不区分类名来源。只要 .btn 在样式表中声明得更早、或权重更高，它就会无差别覆盖所有匹配元素——包括 ant-btn、el-button、甚至你自己未来写的 button--primary。这不是优先级没调好，而是基础层越界了。
- 根本任务是消除浏览器差异：
button, input { font: inherit; }、* { box-sizing: border-box; }这类规则才属于 reset - 一旦加了
.btn { padding: 8px 16px; }，它就不再是 reset，而是偷偷混入的业务规则 - 常见错误现象：全局按钮文字垂直居中失效、
textarea高度异常、第三方弹窗滚动条消失——全都因为基础层“多管闲事”
哪些文件算真正的“非 BEM”基础层，怎么命名和写
只有四类文件可脱离 BEM 架构存在，且必须用下划线前缀标识，否则构建工具或团队协作时极易误用。
-
_reset.css：仅含 normalize/reset 规则，禁止任何类选择器（.xxx）、ID 选择器（#xxx），只允许标签、属性、通配符、伪类 -
_base-typography.css：定义html字体缩放、body行高、h1–h6默认样式，不涉及尺寸固定值（如不用font-size: 14px） -
_utilities.css：纯功能类，如.u-mt-4、.u-flex-center，禁止含业务语义（不能叫.u-nav-spacer） -
_base.css：封装全局继承规则，如a { text-decoration: none; }，所有选择器只能是标签、[attr]、:hover等，禁用类名
注意：base-button.css 不是基础层——它是业务块，应归入 components/button/ 并严格用 BEM 命名。
想复用重置逻辑，但又不想污染全局，该怎么做
别写全局类，改用预处理器 mixin 封装可复用逻辑，再显式应用到目标元素上。
- 错误做法：
.form-control { font: inherit; box-sizing: border-box; }→ 引入新类名，污染全局 - 正确做法：Sass 中定义
@mixin form-reset，然后在input, select, textarea上直接@include form-reset - 如果旧项目必须过渡性使用全局类，用
.base-button这种带base-前缀的命名，并确保它通过@import或injectGlobal在所有组件样式之前载入 - BEM 块内不要再重复写
box-sizing: border-box——这是基础层的事，重复写等于埋雷：万一哪天基础层改成content-box，你的search-form__input宽高会突然错乱
实际项目中最容易被忽略的注入顺序问题
CSS 层叠不看文件路径，只看 @layer 声明顺序 + 选择器权重。如果你把 BEM 块样式写在 @layer base 之前，哪怕它在另一个文件里，也会被基础层规则覆盖——因为后声明的层优先级更高。
更隐蔽的是第三方库加载时机：Ant Design 的 CSS 若在入口 import，它可能比你的 form-field--date 规则先解析，结果你写的 .form-field--date:deep(.el-input__inner) 根本压不住它的默认边框。这时候靠 specificity 或调整 <link> 顺序比改类名更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
