Normalize.css+Resets：在重置样式中选择最佳优化
在前端开发中，为了跨浏览器一致性和避免默认的样式干扰，我们通常需要使用重置样式来规范化样式表。其中比较常用的有 Resets 和 Normalize.css 两种方式。这篇文章主要讲解如何在选择重置样式时进行最佳优化。
Resets 和 Normalize.css 的区别
Resets 是一种基础的样式重置方法。它的原理非常简单，就是把所有标签的默认样式都清空，然后再去定义自己需要的样式。举个例子， resst 样式表中会写上以下代码：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -
这段代码会将常见标签的 margin、padding、border、outline 等属性全部归零，然后设置默认字体大小为 100%。这种方式虽然能够有效地解决浏览器样式兼容性问题，但同时也会带来一系列问题：
- 重置样式会影响所有标签，包括一些外部的 UI 组件库，导致与组件库的样式产生冲突。
- 重置样式破坏了一些默认的 HTML 结构，比如所有标签都变成了行内元素，这样会影响页面布局。
- 在进行样式规划的时候需要写很多冗余的代码。
为了解决上述问题，Normalize.css 应运而生。Normalize.css 是一个用来重置样式的 CSS 库。它保留了浏览器的默认样式，但是在此基础上做了一些优化。具体来说，它主要包含了以下几个方面：
- 样式的准确性更高：Normalize.css 保留了浏览器默认的样式，同时加上了一些修正来避免浏览器不一致性。
- 样式的完整性更高：Normalize.css 不仅重置了基础的样式，还包括许多其他的元素的样式，比如一些新的 HTML5 元素。
- 样式的稳定性更高：Normalize.css 一直在更新，以适应新的浏览器和 Web 标准。
如何选择？
那么，我们在编写前端样式的时候应该如何选择适合自己的重置库呢？在这里，我们总结了一些选择的要点：
- 如果你想保持页面原有结构，避免样式覆盖，那么可以选择 Normalize.css。
- 如果你需要更严格的控制，而不是基于浏览器默认行为，那么可以选择 Resets。
- 如果你使用了一些 UI 组件库，那么可以选择不使用重置库。
最后，我们提供一些示例代码，供大家参考。
- 使用 Normalize.css
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style type="text/css">
/* 这里写入你的自定义样式 */
</style>
</head>- 使用 Resets
-- -------------------- ---- -------
------
------ ----------------
-- ---- ----- --- --
------- -----------------------------------------------------------
-- ----------- --
---- -
----- -------- ---------- ------ ---------- ------ -----------
-
--------
-------总结
本文从 Resets 和 Normalize.css 两方面介绍了如何在重置样式中进行最佳优化。在实际中要根据自己的需求和项目的实际情况选择合适的重置库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469a9cc968c7c53b0984710