Reset必须先于BEM执行，因其唯一任务是抹平标签默认样式（如button、input的边距和字体），严禁在_reset.css中出现任何BEM类名（如.button），否则会无差别覆盖第三方组件样式，破坏架构边界。
因为Reset负责“清空画布”，BEM负责“定义画笔”——两者顺序颠倒，就会在干净的白纸上用错笔刷，导致样式污染和协作混乱。
Reset必须先于BEM执行，否则类名会继承浏览器默认样式
reset.css 的唯一任务是抹平 button、input、h1 等标签的默认边距、字体、行高。如果 BEM 类（比如 .button）出现在 reset 规则之前，浏览器会先应用 .button { padding: 8px; }，再被后续的 button { padding: 0; } 覆盖，结果就是按钮看起来“没样式”。
- 常见错误现象：
.button在 Chrome 正常，在 Safari 里文字挤成一团，查来查去发现是 reset 里的button { font: inherit; }晚于组件 CSS 加载 - 构建工具中，CSS 加载顺序必须是：
_reset.css→_base.css→components/button/button.css - Webpack 或 Vite 中若用
@import，严禁在button.css开头写@import '../base/reset.css';——这会让 reset 变成组件级作用域，失去全局清洗能力
BEM类名不能出现在_reset.css里，否则破坏架构边界
只要 _reset.css 里出现一个 .button 或 .header，它就不再是 reset，而是偷偷混入的业务规则。后果是 Ant Design、Element Plus 这类 UI 库的按钮、输入框直接变形。
- 根本原因：浏览器不区分“谁写的类”，只按加载顺序和权重匹配。一旦
.button在 reset 层声明，它就会无差别覆盖所有class="button"元素，包括第三方组件内部的class="button" - 真正合规的 reset 文件只允许：
button, input, select { margin: 0; }、* { box-sizing: border-box; }、html { font-size: 16px; } - 如果你看到项目里有
_reset.css含.btn，别修它——立刻新建components/base-button/base-button.css，把那几行挪过去，并重命名为.base-button或.button-base
HTML结构里第一个 class 必须是 BEM block，且不能依赖 reset 之外的样式
比如写 <button class="button">提交</button>，这个 .button 必须自己定义所有基础样式（padding、border、font、cursor），不能指望 reset 里某条 button { cursor: pointer; } 来兜底——因为 reset 不该管交互态。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：
.button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid #ccc; background: #fff; cursor: pointer; } - 错误链路：
_reset.css写了button { cursor: pointer; }→ 开发者省事不写 cursor → 某天 reset 被删或顺序错，按钮突然不可点击 - 工具类如
.u-text-center可以复用，但 BEM block（如.button）必须自包含，这是可维护性的底线
最容易被忽略的是：reset 和 BEM 不是“先后关系”，而是“契约关系”——reset 定义了“什么不能写”，BEM 定义了“什么必须写清楚”。漏掉任何一环，团队里就会有人开始猜 .card .title 到底属于哪个模块。
