最稳妥的方式是用<link>标签在HTML<head>中将reset.css置于所有样式表之前：因CSSOM按<link>物理顺序构建，reset必须首载以确保层叠优先；@import、JS import或内联均不可靠，且normalize.css与reset.css不可混用。
最稳妥的方式是：在 HTML 的 <head> 中，用 <link> 标签把 reset.css 放在所有其他样式表之前，且不使用 @import、不内联、不通过 JS import。
为什么必须用 <link> 且放在最前？
浏览器按 <link> 在 HTML 中的物理顺序构建 CSSOM，reset 规则必须成为第一个生效的样式层。一旦被 main.css 或 antd.css 提前加载，哪怕只有一条 body { margin: 8px }，就会覆盖 reset 的 body { margin: 0 }——不是 reset 没写对，是它根本没打赢层叠战。
常见错误现象包括：h1 仍有上下边距、ul 还带圆点、button 保留默认边框和阴影。
- 检查 DevTools → Elements → 任一元素 → Styles 面板，看
margin/padding是否来自 reset 文件且未被划掉 - 禁用
!important：reset 里加它会让后续组件库（如 Element Plus）调试困难 - 路径用根相对路径（如
/css/normalize.css），避免嵌套目录下解析歧义
Vite / Webpack 项目里 JS import 不等于 CSS 加载顺序
很多人以为在 main.js 里写 import './reset.css'; import './main.css'; 就能控制顺序——这是错觉。Vite 默认合并所有 CSS 到一个 chunk，Webpack 受 MiniCssExtractPlugin 分块策略影响，<link> 插入顺序可能由 chunk id 决定，而非 import 顺序。
立即学习“前端免费学习笔记（深入）”；
- 最终生成的 HTML 中，
<link rel="stylesheet" href="reset.css">必须是第一个<link> - Vite 中可配置
build.rollupOptions.output.manualChunks，把 reset 单独打成vendor-basechunk，并确保它最先注入 - Webpack 中用
optimization.splitChunks.cacheGroups显式命名基础样式 chunk，并设priority: 100
别用 @import，尤其别在主 CSS 里嵌套引入
@import 是阻塞式串行加载：它要等当前 CSS 文件完全下载解析完才发起请求，延迟高；而且它的优先级只取决于在文件中的行号，不是物理位置。比如你在 theme.css 底部写 @import 'reset.css';，等效于把 reset 内容粘贴到那行——但它已经晚了。
- 禁止在任何生产环境 CSS 文件中使用
@import引入其他样式表 - 开发期若需变量共享（如 Sass），用构建工具的
additionalData注入全局变量，而不是靠@import拉文件 - PostCSS 用户可用
postcss-import插件，但它只在构建时展开，输出仍是单个 CSS 文件，不产生运行时@import
normalize.css 和 reset.css 别混用，选一个并明确用途
normalize.css 更适合现代项目：它保留语义化默认样式（如 button 有 cursor: pointer、audio 有控件），只修复跨浏览器差异；reset.css 是暴力清零，适合强定制化系统，但容易破坏可访问性。
- 二者不可共存——目标相反，叠加会导致不可预测覆盖
- 如果用了
normalize.css，就别再引入reset.css；反之亦然 - 第三方框架（如 Bootstrap reboot、Tailwind base）也含重置逻辑，必须确保它们在 normalize/reset 之后加载，否则会互相覆盖
真正难的不是怎么写 reset，而是让它的规则在所有构建流程、所有浏览器、所有作用域（包括 Shadow DOM）里都稳定前置——这点光靠 @import 或 JS import 做不到，得靠工程链路卡住入口。
