当我们开始编写网页时，我们的目标是让它看起来美观、整洁和专业。然而，浏览器默认样式的不一致性使得实现这个目标变得困难。于是，CSS Reset 就应运而生，它会去掉浏览器默认的样式，这样我们就能从头开始重新设计样式。
但是，CSS Reset 对页面性能的影响也不能忽略。在这篇文章中，我们将探讨 CSS Reset 与页面性能之间的平衡取舍。
CSS Reset 的优点
CSS Reset 有多种优点：
一致的样式。浏览器的默认样式各不相同，使用 CSS Reset 可以确保所有元素都具有相同的外观和行为。
更容易的样式编写。体验过低版本 IE 的开发者都知道，IE 通过
border-box实现的box-sizing与其他浏览器不相同，导致开发样式时需要考虑多种情况。使用 CSS Reset 时，我们能够将所有元素都设置为相同的box-sizing，从而避免了这个问题。更好的交互性。有时默认样式会导致元素的行为不符合预期，例如因为链接默认的下划线而与其他内容混淆。在这种情况下，使用 CSS Reset 可以确保链接以我们想要的方式显示。
CSS Reset 的劣势
不幸的是，CSS Reset 也有相应的劣势：
文件大小。CSS Reset 包含了很多样式，它会增加文件大小。如果您在多个页面中使用 CSS Reset，所有这些页面都要从服务器获取 CSS Reset。这意味着，所有这些页面的加载时间都会变慢。
渲染时间 虽然一致的样式能够使我们更轻松地编写样式，但其在页面渲染方面的代价却往往高昂。当您使用 CSS Reset 时，浏览器必须先解析 CSS Reset 中的样式，然后应用这些样式到每个网页元素。这比浏览器默认样式多出了很多解析和计算的步骤。
然而，有时您必须使用 CSS Reset。只要您能够平衡文件大小和性能，您就可以通过使用 CSS Reset 得到更一致，更容易使用的样式。
下面是一个简单的 CSS Reset：
- - ------- -- -------- -- ----------- ----------- -
这个 CSS Reset 意味着所有元素都将设置为没有边距，没有填充和 border-box box-sizing。这是一个基本的 CSS Reset，但适用于许多项目。
结论
不要误解文章的意思。本文并不是要劝大家放弃 CSS Reset。相反，这篇文章提醒我们，优雅的平衡取舍应该是我们的目标。
在决定是否使用 CSS Reset 时，您应该考虑您的项目的性能需求。比如，提高网页性能的技巧有很多，如果您的项目偏重于性能，您可能不需要使用 CSS Reset。
最后，我们要建议您始终保持样式简单，不使用不必要的样式，而要在性能和外观之间建立你最想要的平衡。
示例代码：
--------- -----
----- -------------
------
----- ----------------
---------- ----- --------------------
-------
-- --- --- -------- -- ---- -- ------- -- -------
--- ------------ --- -- ------------ --
- -
------- --
-------- --
----------- -----------
-
-- ------ ------ --
---- -
------------ ------ -----------
-
-- -
---------- -----
-
- -
---------- -----
------------ ----
-------------- -----
-
--------
-------
------
------- ----- -----------------
------------------------------------------------------------------
----- --- ----- -------------------------- ----- --------------------------------------- --- ----- ------------------------------------------------
------------- --- --------------------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671617a6ad1e889fe21ab6be