应选normalize.css：适合需兼容chrome 60+、firefox 52+、safari 10+的中大型项目，保留h1加粗等语义默认样式，修复已知bug且注释详尽；现代css reset更轻量，启用box-sizing:border-box和prefers-reduced-motion响应，但放弃旧浏览器兼容，要求自行定义排版系统。
选 normalize.css 还是现代 CSS Reset（如 modern-css-reset），取决于你项目对「默认行为保留程度」和「维护成本」的实际权衡——不是谁更先进，而是谁更贴合你当前的浏览器支持范围、团队习惯与长期迭代节奏。
什么时候该用 normalize.css
它适合需要兼容旧版浏览器（比如仍需支持 Chrome 60+、Firefox 52+、Safari 10+）且不希望重写大量基础语义样式（如 h1 加粗、strong 加粗、em 斜体、blockquote 缩进）的中大型项目。
- 它修复了已知 bug（比如 iOS Safari 中
input[type=date]的点击区域、IE 中flex子项的min-width行为），但不会动这些元素的语义默认表现 - 源码里每条规则都带注释，能快速查到某条样式“为什么存在”，对新成员上手友好
- 如果你还在用 Webpack + CSS Modules 或老版本 Vue CLI，
normalize.css的全局作用方式更稳定，不用额外配:where()兼容性兜底 - 注意：v8.0.1 是最后一个大更新，它没用
:where()，所以特异性依然存在，和你自己写的h1 { font-weight: 700; }冲突时可能需要加!important或调整选择器顺序
什么时候该用现代 CSS Reset
现代 CSS Reset（比如 modern-css-reset）本质是「轻量级基线控制」，只处理真正影响布局一致性的几处，默认值更贴近当前标准，也更愿意放弃旧浏览器的缝合式兼容。
- 它默认启用
box-sizing: border-box全局生效，省去你单独写* { box-sizing: border-box; }的性能隐患 - 对
a:not([class])做了装饰控制，避免无样式的链接突然带下划线破坏设计稿还原度 - 显式响应
prefers-reduced-motion，关闭scroll-behavior: smooth，这点normalize.css完全不涉及 - 不处理
h1～h6的字体大小或行高，意味着你必须自己定义排版系统——这对设计系统驱动的项目反而是优势
sanitize.css 看似折中，但实际门槛更高
sanitize.css 不是 normalize.css 的平滑升级版，而是一个需要配套认知的工具链。它用 :where() 实现零特异性，但这个特性在 Safari 15.4 之前不支持；它的模块化（如 forms.css、typography.css）要求你主动 import，而不是一键引入一个文件。
- 如果你项目已用 Vite / esbuild，且明确支持 Safari 15.4+，
sanitize.css的:where()能帮你彻底避开特异性战争 - 但如果你还跑在 Webpack 4 或需要支持旧 Android WebView，
:where()会被整个忽略，导致样式完全失效——这点很容易被忽略，直到 QA 环境报出一堆未样式化元素 - 它的
ui-monospace.css和system-ui.css模块对终端类、代码编辑类应用很实用，但普通业务项目基本用不到
真正容易被忽略的是：无论选哪个，你都得同步处理「自定义属性继承断层」和「focus 样式可访问性缺失」。这两个点不在任何 reset 库的覆盖范围内，但线上被无障碍检测工具报出的概率极高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
