聊一聊CSS清零与重置方案，2025年还该不该用

每隔一段时间，社区里就会有人抛出类似的问题：都 2025 年了，浏览器早就不是当年那个 IE 横行的年代，CSS 清零（Reset）和重置（Normalize）还有必要吗？尤其是在 Tailwind 的 preflight、各种 UI 组件库默认样式、CSS-in-JS 方案满天飞的今天，很多人一年到头都没自己写过一行 margin: 0，于是「Reset 已死」的论调又开始流行。

我的看法是：Reset 没有死，死的是「无脑照抄一份十年前的清零文件」。今天真正该讨论的，不是用不用，而是重置什么、在哪一层重置、用什么姿势重置。

为什么要重置：那段被 IE 支配的历史

先回顾一下来源。Reset 的初衷，是抹平不同浏览器对默认样式的差异。body 有 8px margin、ul 有 padding-left、h1 的 font-size 各家不同、button 的字体不继承……于是 Eric Meyer 的 reset.css 一刀切下去，把所有元素清成白纸。后来 Nicolas Gallagher 提出 normalize.css，主张「不是抹掉，而是修正」——保留有意义的默认值，只修掉跨浏览器的偏差。

这两种思路的分野至今仍有意义：Reset 是「归零」，Normalize 是「校准」。而绝大多数项目真正需要的，其实是后者。

2025 年的现实：差异变小，但没消失

先说好消息。HTML5 Boilerplate 时代的那些坑基本填平了，box-sizing、flex 行为、表单元素的表现已经高度趋同。现代浏览器对 revert、all: unset、:where() 的支持也已经非常稳。

但坏消息是，差异并没有归零，只是换了地方。举几个今天仍然会咬人的例子：

• h1 到 h6 的字号、p 的上下 margin 在不同浏览器引擎下的默认值仍然不完全一致；
• input、textarea、select、button 的字体、行高、内边距需要显式继承，否则中文环境下容易出现字体回退到宋体的情况；
• img、video 默认是 inline，底部会莫名多出几像素空隙，这在做卡片布局时非常常见；
• 移动端 Safari 的 body 滚动行为、-webkit-text-size-adjust 引起的字号突变，至今仍需处理。

所以「浏览器已经统一了」这个前提，本身就站不住脚。差异变小了，但恰好剩下的是中文排版、移动端交互这些你躲不开的地方。

真正的变化：从全局覆盖到分层可控

我认为 2025 年最大的变化不是「还要不要重置」，而是「重置的写法变了」。

第一，用 :where() 把优先级降到零。这是现代 Reset 最关键的一步。传统的 * { margin: 0 } 权重是 0,0,0，但 ul { padding: 0 } 是 0,0,1，经常和组件样式打架。用 :where(ul, ol) { padding: 0 }，权重依然是 0，业务代码永远能轻松覆盖，不需要动辄上 !important。

第二，用 @layer 明确层级。把重置放进 @layer reset，让它在级联中永远排在业务样式之前。这解决了一个长期痛点：重置样式和组件样式的覆盖顺序，不再依赖引入顺序这种玄学。

第三，用 revert 而不是硬编码值。all: revert 比手动写一堆默认值更贴近浏览器原意，也更符合 Normalize 的哲学。

第四，按需而非全量。现代项目里，很多人在用的其实是 Josh Comeau 或 Andy Bell 那种几十行的「Modern CSS Reset」——几乎只做几件事：box-sizing: border-box、媒体元素 display: block、表单控件继承字体、标题和段落 margin: 0、允许换行不溢出。这已经足够。

什么时候不该重置

也有几种情况，我倾向于不引入全局 Reset。

一是做内容页、文档站、博客。这时候浏览器默认的标题层级、段落间距、列表样式恰恰是你要的，全清掉反而要一样样写回来。二是使用 Tailwind 这类自带 preflight 的框架，再叠一份 Reset 是重复劳动，还可能互相打架。三是写 Web Component 或 Shadow DOM 内部样式，本来就天然隔离。四是需要保留原生「可访问性」的场景，比如 :focus-visible 的默认轮廓，千万不要一刀切掉 outline——那是可访问性事故。

结论：不是该不该用，而是怎么用

回到标题。2025 年，我的答案是：**项目级的、小而精准的重置，依然值得用；从网上复制一份 2013 年的 reset.css 贴在顶部，才是不该用的那个。**

具体建议很简单：优先用 normal-normalize 或现代精简版 Reset；用 :where() 降权重、用 @layer 定层级；只处理真正会咬人的问题——盒模型、表单继承、媒体元素、字体渲染；保留有意义的默认值，特别是标题、列表和焦点样式。重置的目的从来不是「把一切都变成零」，而是让你的样式表从一个干净、可预测、跨浏览器一致的起点开始。只要这个起点还有价值，Reset 就不会过时。