reset.css 必须是 html 中第一个 标签引入，否则其规则会被后续样式覆盖；应避免 @import、内联 或 js 模块导入，推荐根路径 直接加载，并注意 shadow dom 等作用域隔离场景需额外处理。
reset.css 必须是第一个 <link>，顺序错就等于没引
浏览器解析样式时按 <link> 出现顺序构建 CSSOM，reset 规则必须在所有自定义样式之前生效。一旦你把 main.css 或 base.css 放在 reset 前面，哪怕只有一条 body { margin: 0 }，它都可能因选择器权重或声明顺序覆盖 reset 的同名规则。
常见错误现象：h1 还有上下边距、ul 仍带圆点、button 保留默认边框——不是 reset 写得不对，是它根本没打赢优先级战争。
- 确保 HTML 中
<link rel="stylesheet" href="reset.css">是第一个<link>，前面不能有任何其他样式表 - 不要混用
<style></style>标签内写规则 + 同时用@import引 reset，<style></style>的加载顺序不可控 - 检查 DevTools → Elements → 任一元素 → Styles 面板，看
margin、padding等是否来自 reset 文件且未被划掉
用 link 而不是 @import 引入 reset.css
@import 在 CSS 文件里引入 reset 是典型“看起来对、实际埋雷”的做法：它同步阻塞解析，且引入的规则权重天然低于后续同名声明；更关键的是，它无法保证在整个项目中唯一、首个执行。
比如你在 theme.css 里 @import "reset.css"，但用户又在 components.css 里写了 h1 { margin: 1em 0 }，那 reset 的 h1 { margin: 0 } 就大概率被跳过。
- 直接在 HTML 的
里用<link rel="stylesheet" href="/css/reset.css"> - 路径用根相对路径（如
/css/reset.css）比相对路径（如./reset.css）更稳，避免嵌套目录下解析歧义 - 禁用
!important—— reset 里加它会让后续所有组件样式调试变困难，尤其是用了 Element Plus、Ant Design 这类库时
Vite / Vue / React 项目中全局引入的正确姿势
现代构建工具环境下，import './assets/reset.css' 看似方便，但存在隐性风险：如果 reset.css 里用了 @import 或含 url() 资源，而构建工具没配置好 CSS 处理链，就可能漏解析或路径出错。
更稳妥的方式是回归语义本质：reset 是“基础层”，它不该被 JS 模块系统包裹，而应作为纯静态资源由 HTML 直接加载。
- Vite 项目：把
reset.css放进public/目录，HTML 中用<link href="/reset.css" rel="stylesheet"> - Vue CLI：同样放
public/css/reset.css，在public/index.html中首位<link> - React（Create React App）：放
public/reset.css，修改public/index.html，确保它在manifest.css和index.css之前
Shadow DOM 和 scoped 样式会让 reset 失效
如果你用 Web Components、Vue 的 <style scoped></style> 或某些 UI 库的封装组件，reset.css 默认不会穿透到这些封闭作用域内部。此时外部重置了 button，组件内的 <button></button> 依然走浏览器默认样式。
这不是 reset 引入方式错了，而是 CSS 作用域天然是隔离的。别指望一份 reset 全局搞定所有场景。
- Web Components：需在每个
shadowRoot内手动注入 reset 规则，或使用:host ::slotted(*)等穿透写法（有限支持） - Vue scoped：可在组件内显式重置关键属性，例如
<style scoped> button { margin: 0; padding: 0; } </style> - 框架组件库：优先查阅文档是否提供「reset mode」或「base style」开关，而非硬覆盖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
