sanitize.css 是现代项目必备基础样式库，它通过 :where() 保持低特异性、保障表单一致性、默认支持响应式与无障碍，比手动重置或使用 reset.css 更高效可靠。
sanitize.css 不是“要不要用”的问题，而是“什么时候不用更麻烦”的问题。如果你的项目需要在 Chrome、Safari、Edge（含旧版）甚至部分 WebView 中保持表单控件外观一致、图片默认响应式、文本行高舒适、无障碍语义不被破坏——那直接上 sanitize.css 比手动补一堆 box-sizing: border-box 和 margin: 0 更省事。
为什么浏览器默认样式不能信
不同浏览器对同一标签的用户代理样式（user agent stylesheet）差异真实存在：button 在 macOS Safari 中圆角略大、内边距偏小；input[type="number"] 在 Chrome 中右侧有微调箭头，在 Firefox 中没有；details 和 summary 的展开动画行为不统一；textarea 的 resize 默认值在各平台也不同。这些不是 bug，是浏览器实现策略差异。不干预，就等于把 UI 一致性交给运气。
reset.css 会清掉你真正需要的东西
reset.css（如 Eric Meyer 版）典型做法是：
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: normal; }
这直接抹平了语义层级，导致屏幕阅读器无法靠字体大小推断结构重要性。它还常把 ol、ul 的 list-style 强制设为 none，却不管是否加了 role="list"——结果是可访问性测试失败。更实际的问题是：你得立刻重写所有标题、列表、段落的样式，否则页面一片平庸灰白。
sanitize.css 的 :where() 是关键分水岭
sanitize.css 所有规则都包裹在 :where() 中，比如：
:where(h1, h2, h3, h4, h5, h6) { margin-block: 0.83em 0.67em; }
这意味着它的特异性永远是 0——你写 h1 { color: #1a1a1a; } 就能稳稳覆盖，不用加 !important 或多层嵌套。而 normalize.css 和老式 reset.css 都用原生选择器，容易和组件库样式打架。这点在使用 Tailwind、Windi 或自定义 CSS-in-JS 时尤为明显。
常见误操作包括：
- 把
sanitize.css放在自定义样式之后加载——它本该是 CSS 入口第一行 - 只引入主文件
sanitize.css，却忽略forms.css模块——导致select在 Windows 和 macOS 上仍不一致 - 期望它修复所有现代 CSS 行为（如
aspect-ratio、container查询）——它只处理 HTML 元素级基础样式，不替代功能 polyfill
移动端和无障碍不是附加项，是 sanitize.css 的默认项
它默认启用：
-
img、video、svg的display: block+max-width: 100%，无需额外写响应式图片规则 -
button、input、select等控件自动继承font和line-height，避免文字被截断 - 所有带
aria-*属性的元素获得基础可访问样式（如aria-hidden="true"元素默认display: none）
这些不是靠文档说明“建议开启”，而是开箱即用。如果你的项目要过 WCAG 2.1 AA，跳过 sanitize.css 意味着你要手动校验并补全至少 17 处语义控件的 focus 样式、contrast ratio、键盘导航流——而这些，sanitize.css 已经在模块里写好了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
