重新思考CSS Reset：normalize.css vs reset.css vs remedy.css，在2025年该如何选？

我带团队Review一个新项目的启动代码时，有一个文件我一定会仔细看，那就是CSS Reset。

它虽然不起眼，但却像我们整个CSS架构的地基。地基打不好，上面的楼盖得再漂亮，也容易出问题，后期维护成本会非常高。

从十多年前 reset.css 横空出世，到后来normalize.css 成为事实标准，再到近几年出现的一些新方案，CSS Reset的理念，其实也在不断演进。

但现在都2025年10月了，IE早已入土为安，主流浏览器对标准的支持也空前一致。我们还有必要像十年前那样做重置样式吗？

今天，我就想聊聊我对这几个主流方案的看法，以及在我们团队的当前项目中，我是如何选择的。

---

reset.css

• 它的原理 ：非常暴力直接------抹平所有浏览器默认样式 。margin, padding, font-size, line-height...通通归零，h1、p、ul、li在外观上变得一模一样，所有元素都回到最原始、最裸的状态。

• 代码片段感受一下：

  /* http://meyerweb.com/eric/tools/css/reset/ 
     v2.0 | 20110126
     License: none (public domain)
  */
  
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
          display: block;
  }
  body {
          line-height: 1;
  }
  ol, ul {
          list-style: none;
  }
  blockquote, q {
          quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
          content: '';
          content: none;
  }
  table {
          border-collapse: collapse;
          border-spacing: 0;
  }

• 优点：提供了一个绝对干净、可预测，非常适合那些需要从零开始、高度定制视觉风格的网站。

• 2025年的缺点：

  1. 太粗暴了 ：它移除了很多有用的默认样式。比如，你写了一个<ul>，却发现前面的项目符号没了，还得自己手动加回来。
  2. 破坏了语义化 ：一个<h1>在视觉上和<p>毫无区别，这在开发初期，会削弱HTML语义化的默认视觉反馈。
  3. 调试困难：当你在DevTools里审查一个元素时，你看到的样式，和它本该有的默认样式天差地别，这会增加调试的心智负担。

在2025年，对于绝大多数项目，我不推荐再使用这种粗暴的Reset样式。

---

normalize.css

• 原理 ：与reset.css完全相反------保留有用的浏览器默认样式，只修复已知的浏览器不一致和Bug。它不在重置，而是修正。

• 代码片段感受一下：

  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  /* Document
     ========================================================================== */
  
  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   */
  
  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }
  
  /* Sections
     ========================================================================== */
  
  /**
   * Remove the margin in all browsers.
   */
  
  body {
    margin: 0;
  }
  
  /**
   * Render the `main` element consistently in IE.
   */
  
  main {
    display: block;
  }
  
  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */
  
  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }
  
  /* Grouping content
     ========================================================================== */
  
  /**
   * 1. Add the correct box sizing in Firefox.
   * 2. Show the overflow in Edge and IE.
   */
  
  hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
  }
  
  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */
  
  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }
  
  /* Text-level semantics
     ========================================================================== */
  
  /**
   * Remove the gray background on active links in IE 10.
   */
  
  a {
    background-color: transparent;
  }
  
  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
   */
   
   /*  大部分已省略，完整的版本可以查看👉 https://github.com/necolas/normalize.css/blob/8.0.1/normalize.css */

• 优点：

  1. 保留了元素的默认语义化样式，h1就是比h2大。
  2. 只修复问题，代码注释清晰，像一本浏览器修复手册。
  3. 它成为了过去十年里，包括Bootstrap、Ant Design在内，无数框架和组件库的基石。

• 2025年的缺点：

  1. 过于保守 ：它只修复不一致，但并没有提供一些我们现代开发中普遍认为更好的默认值。比如，它就没有设置box-sizing: border-box;。
  2. 部分规则已过时：它里面的一些修复，是针对我们现在根本不需要支持的、非常古老的浏览器版本的（比如旧版IE）。

normalize.css在今天，依然是一个安全、稳妥的选择。它不会犯错，但我觉得，它有点不够看了😫。

---

最佳选择：remedy.css

• 原理 ：在normalize.css的基础上，再往前走一步 。它不仅修正了不一致，还提供了一套我们现代Web开发中，普遍认为 更好的默认样式。

• 核心特性：

  1. 开箱即用的border-box：

     *, ::before, ::after {
       box-sizing: border-box;
     }

     这几乎是所有现代CSS项目的第一行代码，它帮你写好了。

  2. 更好的响应式媒体元素：

     img, picture, video, canvas, svg {
       display: block;
       max-width: 100%;
     }

     这能天然地防止图片、视频等媒体元素撑破布局，是响应式设计的基础。

  3. 更平滑的字体渲染和滚动：

     html {
       -moz-text-size-adjust: none;
       -webkit-text-size-adjust: none;
       text-size-adjust: none;
       scroll-behavior: smooth;
     }

  4. 更友好的可用性/无障碍默认值：

     [disabled] {
       cursor: not-allowed;
     }

• 优点：它像一个经验丰富的老手，把你开新项目时，那些不得不写的、或者最好要写的样板代码，都提前帮你准备好了。

• 缺点 ：它带有一定的主观性。比如，它默认移除了所有元素的margin，统一用padding来控制间距，这需要你适应它的理念。

对于我们团队的新项目 ，尤其是那些需要快速启动的中后台项目，remedy.css或者类似的现代Reset方案（比如modern-css-reset），已经成为了我的首选。

---

选择与建议🤞

Reset 类型	哲学思想	适用场景	在2025年的建议
reset.css	简单粗暴的重置	高度定制视觉、几乎没有原生HTML元素的UI	不推荐❌
normalize.css	保留并修正	任何项目，尤其是需要保持浏览器原生感的	安全，但略显保守👍
remedy.css	现代最佳实践	所有新项目，尤其是中后台、需要快速启动的项目	强烈推荐首选👍👍👍
自己定义	量身定制	大型项目、有完整设计系统的团队	终极方案，成本高🤔

CSS Reset 只有权衡，没有什么可选，不可选。

但在2025年，我们权衡的基点，已经从如何抹平IE的差异 ，变成了如何以一个更现代、更高效、更符合最佳实践的基点，来开始我们的工作。

所以，下次当你的新项目npm init之后，别再下意识地npm install normalize.css了。

或许，remedy.css会给你一个更好的开始。

祝大家国庆愉快🙌