粉丝福利：重新思考 CSS reset（样式重置）

大家好，这里是大家的林语冰。《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。

最近有粉丝明示想深度学习 CSS 样式重置，作为“宠粉狂魔”，UP 主犹豫了 3 秒钟，决定加更一期关于 CSS reset 的文章。

CSS reset 是什么鬼物？

CSS reset 意思是 CSS 样式重置，又名 CSS 样式初始化或样式标准化。在前端工程化中，CSS reset 往往是样式架构的第一步，也是团队协作的一大步。

CSS reset 体现的是一种“破而后立”的编程意图，样式重置的福利包括但不限于：

• 规避浏览器默认层叠样式的副作用
• 抹平不同浏览器预设样式的不一致性
• 自定义全局通用的预设样式
• ......

由于“浏览器世界大战”余波未平且影响深远，不同的浏览器及其不同版本往往预设了神头鬼脸的默认样式，有的浏览器甚至已经当场退役，比如“万恶之源” IE 浏览器。

因此，现实开发中 CSS reset 既没有唯一解或“绝对真理”，也不存在权威的官方标准，只有若干社区范例，大家可以按需参考、自由重置。

normalize.css

粉丝请注意，虽然没有任何赞助，但是今天 UP 主要推荐的是 normalize.css。

我们瞄一眼使用 css reset 关键字在 GitHub 进行大数据搜索的结果，有图有真相，大数据告诉我们收藏最多、人气最高的就是 normalize.css。

如你所见，normalize.css 的收藏量高达 51.6k，比 UP 主的女粉还多！如果我们拿 normalize.css 和同款工具库中的第二名相比，就会发现其收藏量是亚军的十几倍，这数据已经说明了 normalize.css 的含金量，所以我们可以放心使用。

normalize.css 意思是“CSS 样式标准化/规范化”，官方自我介绍的措辞是 —— “CSS 重置的现代化备胎方案”。

normalize.css 的产品定位包括但不限于：

• 与其他 CSS 重置方案不同，它尽量保留有用的默认值
• 标准化各种元素的样式
• 纠正错误和常见的浏览器不一致问题
• 通过微调提高可用性
• 提供详细注释，解释源码的功能

浏览器支持包括但不限于：

• Chrome
• Edge
• Firefox ESR+
• Internet Explorer 10+
• Safari 8+
• Opera

供给决定需求，需求决定业务，CSS reset 的需求决定了源码实现应该保持精简，因为重置大量样式过犹不及，可能会搬起石头砸到自己的猫。

因此，大部分主流 CSS reset 库的源码都十分苗条，normalize.css 也一样，整体源码 + 注释不到 400 行，而且注释比源码还多，十分适合我们参考和学习。

normalize.css 可以通过 CDN 链接引用，现实开发中我们更常使用 npm/pnpm 作为第三方模块集成。

normalize.css 是与框架和样式方案无关的 CSS reset 库，所以既可以和 Vue/React 等前端框架“梦幻联动”，也可以和 SCSS/Less “无缝衔接”。

结合 Vite 等人气爆棚的前端工具链，我们在前端工程化中需要做的唯一一件事就是，在诸如 main.js 之类的入口文件中导入 normalize.css。

举个栗子，我们可以瞄一下人气爆棚的 Vue 模板库 vue-element-admin 的源码：

其他方案

粉丝都知道，UP 主最近在练习“UnoCSS 之父”孵化的 UnoCSS，UnoCSS 的生态系统就提供了一大坨 CSS reset 方案，任君选择。

举一反一，如果你不想使用 normalize.css，也可以选择你目前常用的 CSS 方案，再搜索相关的插件或模块，一般而言，人气比较高、维护比较稳定的 CSS 方案，包括但不限于 UnoCSS、Tailwind CSS 等，周边生态都会提供相应的同款 CSS reset 功能。

除此之外，我们可以瞄一下上文使用 css reset 关键字在 GitHub 进行大数据搜索的其他方案，收藏量只是一个重量级指标，但不是唯一指标。

源码启示录

我们说过，CSS reset 不存在“绝对真理”，normalize.css 虽然人气最高，但我们必须独立思考，才能摆脱“权威效应”的思想钢印。

举个栗子，重置盒模型是一个常见的操作：

/* 市面上常见写法 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

如你所见，我们把所有元素和伪元素的盒模型都统一设置为 border-box，而不是默认的 content-box。

虽然但是，如果我们瞄一眼 normalize.css 的源码，就会发现，它根本没有这么做。

CSS reset 是灵活的，除了业务需求，CSS 功能也日新月异，这也会影响重置样式的实现或重构。

举个栗子，我们来瞄一下 normalize.css 和 '@unocss/reset/normalize.css' 的对照实验：

/* normalize 的源码 */
hr {
  box-sizing: content-box;
}

/* uno 的源码 */
:where(hr) {
  box-sizing: content-box;
}

如你所见，上述代码中的 :where() 伪类就属于较新的写法。新的功能通常由于浏览器支持和兼容性而有所滞后，但有时对于样式重构利大于弊。

总而言之，CSS reset 的写法五花八门。当且仅当我们能够权衡自己的需求，才能选择最具性价比的方案。

高潮总结

CSS reset 是样式重置或标准化，这在前端工程化中，通常是样式架构的第一步。

CSS reset 没有唯一解，我们可以按需自定义，功能和写法随机应变。如果有人标榜自己的 CSS reset 是官方权威，那它大概率不是一个诚实的铲屎官。

我们可以选择集成人气最高的 normalize.css，也可以根据自己的 CSS 方案搜索周边生态。

本期话题是 —— 你正在使用的 CSS reset 是社区版还是个人版？你想推荐那个 CSS reset 工具库呢？

欢迎在本文下方群聊自由言论，文明共享。谢谢大家的点赞，掰掰~

《前端猫猫教》每日 9 点半更新，坚持阅读，自律打卡，每天一次，进步一点。