什么是 CSS Reset？
当我们开始编写样式表时，我们需要先让所有浏览器都以相同的方式呈现我们的网页。这就是 CSS Reset 所做的事情。 CSS Reset 是一段特定的 CSS 代码，它重置（reset）浏览器自带的样式，将所有 HTML 元素的样式都归零。这样在不同浏览器中呈现的页面就可以基本上相同了。
CSS Reset 的主要目的是清除浏览器默认样式，从而让我们更容易地编写跨浏览器兼容的 CSS 样式表。
问题所在
CSS Reset 是一个有效的策略，但是它有时候会导致页面加载速度变慢。当你使用一份庞大的 CSS Reset 时，所有的 HTML 元素都会被重置，这意味着，页面的渲染时间将会变长。
如何优化
1. 活用继承
使用继承可以使得页面样式更为简单，代码量也随之减少。这对于 CSS Reset 很关键。 因为，我们可以在重置父元素样式时，直接将其所有子元素的样式直接修改为需要的样式，而不是将所有子元素的样式全部清零。这样可以让页面加载获得更快的速度。
以下是一个以 padding 和 margin 为例子的代码示例。在此示例中，我们只需要重置父元素样式，而不是特定的子元素。
---- - -------- -- ------- -- ---------- ----- ------------ ---- - ---- - -------- -- ------- -- ------------ ---------- ------ ------------ ----------- ------ ----- -
2. 只把必要的重置样式写入代码中
只写入必要的样式能够减少 CSS Reset 代码的体积，从而减少页面加载时间。一些常用的 CSS Reset 样式包括 margin 和 padding 样式。
以下是一个简单重置样式的代码示例
----- ----- --- -- - ------- -- -------- -- - --- -- - ----------- ----- -
3. 使用工具优化
当然，你还可以使用一些工具来帮助你优化 CSS Reset，比如说使用 Less 的 normalize.css，或者使用 PostCSS 插件 postcss-normalize。这些工具都会自动化地处理部分 CSS Reset 常用样式，让这些样式成为浏览器默认的样式，从而减少了 CSS Reset 代码体积。在使用这些工具时，你需要确认你真正需要的样式都已经包含在工具中，否则可能还会包含不必要的部分，从而让页面加载速度变慢。
结论
优化 CSS Reset 是非常重要的，因为它可以大大提高页面加载速度，提高用户体验。当你掌握了优化 CSS Reset 的技巧之后，你可以提高自己的前端技能，进而在更高层面上工作。现在，你已经知道如何通过使用继承、只把必要的 CSS 代码写入代码中，以及使用工具，优化 CSS Reset 了，所以别忘了在下一个项目中试试吧！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cef605f551281025c0cb3