reset.css必须是HTML中第一个<link>标签，位于<head>内所有其他样式表之前，且不能被@import、<style>或JS模块引入干扰；否则其规则会被后续样式覆盖，导致h1仍有边距、ul保留圆点等现象。
reset.css 必须是 HTML 中第一个 <link> 标签
不是“放在样式表开头”就够，而是必须在 <head> 里所有其他 CSS 文件之前，且不能有任何 <style> 或 @import 干扰。浏览器按顺序构建 CSSOM，一旦 main.css 或 base.css 先加载并声明了 body { margin: 0 }，reset 的同名规则就大概率被跳过——哪怕只差一行顺序。
常见错误现象：h1 还有上下边距、ul 仍带圆点、button 保留默认边框。这不是 reset 写错了，是它根本没打赢优先级战争。
- 检查 DevTools → Elements → 任一元素 → Styles 面板，看
margin、padding是否来自reset.css且未被划掉 - 路径用根相对路径（如
/css/reset.css），避免嵌套目录下解析歧义 - 禁用
!important——reset 里加它会让后续组件样式调试变困难，尤其和 Element Plus、Ant Design 等库共存时
Vite / Vue / React 项目中别用 JS 模块 import 引入 reset.css
看似方便的 import './assets/reset.css' 实际埋雷：如果 reset.css 里含 @import 或 url() 资源，而构建工具没配好 CSS 处理链，就可能漏解析或路径出错；更关键的是，JS 模块引入无法保证其在 CSSOM 构建阶段“最早生效”。
正确姿势是回归语义本质：reset 是基础层，不是业务逻辑，不该被 JS 模块系统包裹。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Vite：把
reset.css放进public/目录，HTML 中写<link href="/reset.css" rel="stylesheet"> - Vue CLI：放
public/css/reset.css，在public/index.html中首位<link> - Create React App：放
public/reset.css，修改public/index.html
别用 @import 在 CSS 文件里引入 reset
@import 是典型“看起来对、实际埋雷”的做法：它同步阻塞 CSS 解析，且引入的规则权重天然低于后续同名声明。比如你在 theme.css 里 @import "reset.css"，但 components.css 里写了 h1 { margin: 1em 0 }，那 reset 的 h1 { margin: 0 } 就大概率失效。
此外，@import 的加载顺序不可控，还可能触发额外 HTTP 请求（非 HTTP/2 场景下更明显）。
- 绝对不要在任何 CSS 文件里用
@import引入 reset - 也别混用
<style>内联 +@import，内联样式的加载时机更难预测 - Shadow DOM 或 Vue
scoped样式下，reset 默认不穿透，需额外处理（如使用:host ::slotted(*)或全局注入）
现代项目优先考虑 modern-normalize.css 而非传统 reset.css
不是“哪个更好”，而是解决的问题不同：传统 reset.css 是暴力清零（* { margin: 0; padding: 0; }），会抹掉 fieldset 边框、ol 计数器等有用表现；modern-normalize.css 是温和对齐——只修正真实存在的跨浏览器差异（比如 Firefox 下 <button> 默认有 margin、Chrome 没有），保留合理语义样式。
如果你用 Tailwind、Windi 等原子 CSS 框架，它们内置的是 normalize 类逻辑，再叠一层传统 reset 反而可能引发意外交互。
- 验证是否生效：执行
getComputedStyle(document.querySelector('h1')).fontSize，对比 Chrome/Firefox/Safari 输出值是否一致 - 注意伪元素：
modern-normalize.css不清除::before/::after，但某些老版 reset 会，可能导致 FontAwesome 图标消失 - 它不重置
margin，所以你仍需自己定义段落间距、标题留白等——这反而是好事，避免“清零后全得重写”的开发负担
真正容易被忽略的点是作用域穿透和验证方式：reset 或 normalize 是否生效，不能只看首页渲染，必须查具体元素的 computed styles；而 Shadow DOM、scoped、微前端子应用这些隔离场景，会让 reset.css 彻底失效——此时需要框架特定方案（如 Vue 的 <style scoped> + deep 选择器，或 Web Components 的 adoptedStyleSheets）。
