在前端开发中，我们经常需要对页面的样式进行定制，但不同浏览器有着不同的默认样式，这会导致我们的样式在不同浏览器下的呈现效果不一致。于是，CSS Reset 应运而生。
CSS Reset 是一种前端开发技巧，旨在通过全面重置页面元素的默认样式来消除浏览器之间的差异，从而使得开发者能够更容易的处理样式。但是，近年来，出现了一种新的 CSS Reset 模式——精简优化型 CSS Reset，它不是完全清空默认样式，而是在保持一些常用样式的基础上，通过全局重置来达到精简优化的效果。那么，CSS Reset 到底应该选择哪种类型呢？本文将从多个方面进行介绍、详解。
传统的全面重置型 CSS Reset
全面重置型 CSS Reset 是最早出现的一种 CSS Reset 方法，它的原理是将所有 HTML 元素的默认样式都清空，然后重新定义样式。这种方式的优点是，样式可以从零开始定制，但缺点也很明显，由于所有元素的默认样式被清空，开发者在排版、美化等工作中需要手动添加大量的样式。
以下是一个经典的全面重置型 CSS Reset 样式，来自于 Eric Meyer 的 Reset CSS（当前最流行的 CSS Reset 范例之一）：
-- -------------------- ---- -------
-- ----- --- --
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
------------ --------
----------- --------
---------- -----
------------ --------
--------------- ---------
-
-- --- ------- ------ --
---- -
------------ --
-
--- -- -
----------- -----
-
----- -
---------------- ---------
--------------- --
-这段代码将所有 HTML 元素的默认样式都清空，并且添加了一些新的基础样式。使用了这段代码后，会让整个页面的元素基础样式处于一个相对风格规范的状态，开发者可以基于此进行后续的样式定制。
优点：
- 样式从零开始定制，适用于复杂项目。
- 能够最大程度的避免浏览器之间的差异。
缺点：
- 需要手动添加大量样式。
- 在保证兼容性的前提下，会增加页面的加载时间。
精简优化型 CSS Reset
近年来，随着前端技术的发展，出现了一种新的 CSS Reset 方式，被称为精简优化型 CSS Reset。与传统的全面重置型 CSS Reset 不同的是，它不完全清空 HTML 元素的样式，而是在保持一些常用样式的基础上，通过全局重置来达到精简优化的效果。
以下是一段常用的精简优化型 CSS Reset 样式：
-- -------------------- ---- -------
-- -------- ---- --
-- ---------- -------- -
----------- -----------
-
----- ----- --- --- --- --- --- --- -- --- ------ ------- ---- ---- -- -- --- --- --- --- --- --- ---- -- ----- --------- ------ --------- ----------- --- ---- ------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------------ --------
---------- --------
----------- --------
------------ --------
------------ --------
--------------- ---------
-
--- -- -
----------- -----
-
------- ------ --------- ------ -
------- --
-
----- -
---------------- ---------
--------------- --
-
---- -------- -
------- --
-这段代码只重置了一些常用元素（如文本、列表、表格等）的样式，并且不是全部清空，而是读取了元素的继承属性，保留了一些比较常用的样式。这样，在一个较好的基础上进行样式定制，可以节省不少工作量。
优点：
- 保证了一些常用样式的基础。
- 使用简洁清晰，加载较快。
缺点：
- 对于一些特殊的样式处理，可能需要手动添加一些额外样式。
- 在强行保留某些元素的样式上，可能会降低后续定制的可能性。
如何选择
针对 CSS Reset，我们需要根据实际需求和情况来进行选择。如果你的项目比较复杂，需要处理的元素类型较多，建议选择传统的全面重置型 CSS Reset，因为样式可以从零开始定制，更加灵活。但是，这种方式代码量比较大，需要手动添加大量样式。
如果你的项目类型相对简单，例如只需要处理文本、列表、表格等常用元素，那么建议选择精简优化型 CSS Reset。这种方式不需要手动添加太多样式，使用起来更加方便快捷，同时还能保留一些常用的样式，能够帮助开发者节省不少工作量。
总结
CSS Reset 在前端开发中是非常常见的技巧，有不同的实现方式，有全面重置型 CSS Reset，也有精简优化型 CSS Reset。在实际应用中，需要根据项目需求、元素类型、开发成本等方面进行选择，从而达到最佳的开发效果。
参考代码：
- Eric Meyer - Reset CSS：https://meyerweb.com/eric/tools/css/reset/
- Resetbox：https://resetbox.tachyons.io/
本文参考了一篇博客，原链接如下：
- CSS Reset 模式：https://juejin.cn/post/6844903634686817287
作者：Jake Hu（Github：Jake-Hu）
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651907ae95b1f8cacd146c3a