什么是 CSS Reset？
当浏览器解析 HTML 时，会给一些 HTML 元素添加默认的样式。这是因为各种浏览器对 HTML 元素的默认样式不一样，为了保证每个浏览器展示的页面尽量一致，CSS Reset 出现了。CSS Reset 是一个将所有 HTML 元素的默认样式设置为一致的基础 CSS 文件。
为什么需要 CSS Reset？
使用 CSS Reset 可以让我们在样式设计时避免因浏览器默认样式差异导致的兼容性问题。同时，CSS Reset 也可以让我们更好的控制样式，使代码更加规范化、易于维护。
如何做好 CSS Reset？
1.选择合适的 CSS Reset
常见的 CSS Reset 有 Eric Meyer Reset、Normalize.css 等。这些 CSS Reset 均有其特点，我们需要选择适合项目的 CSS Reset。
Eric Meyer Reset：是一个很早的 CSS Reset，它将大部分元素的 margin 和 padding 设置为 0，同时将部分表单元素还原为一致的状态。该 Reset 的特点是清空了所有的样式，适用于对浏览器默认样式的严格控制。
Normalize.css：与 Eric Meyer Reset 不同，它尝试保留一些有用的浏览器默认样式。Normalize.css 主要处理了一些常见的浏览器的样式差异，例如表单元素不能完全的一致化，不同浏览器宽度、行高的差异性等。Normalize.css 可以作为一个生产环境下的 CSS Reset 选择。
2.详细阅读 CSS Reset 的源代码
不同的 CSS Reset 可能针对不同的浏览器默认样式进行设置，因此一定要详细阅读 CSS Reset 的源代码。查看每一个元素默认样式被设置为了什么，以及这种设置的影响。这样可以更好的理解，在项目中如何使用 Reset。
3.结合项目实际需要进行二次定制
CSS Reset 不是适用所有场景，我们需要结合项目实际需要进行二次定制。在二次定制时，需要清楚的了解项目哪些部分需要 Reset，哪些部分不需要进行 Reset。
4.避免传统 Reset 导致的一些问题
传统的 CSS Reset 会将所有 HTML 元素的默认样式清除掉，这会导致一些影响性能的问题。例如在页面中使用大量的标签时，清除后不仅浏览器渲染速度变慢，而且页面代码也变得难以阅读，给开发和维护带来了不必要的困扰。
因此，在 CSS Reset 时我们要保持谨慎，不要修改过多的默认样式。应该在实际开发中，根据项目需要去选择修改哪些默认样式。
示例代码
Eric Meyer Reset
-- -----------------------------------------
---- - --------
-------- ---- ------- -------
--
-- ----- ------------ ----- --- ----- -------- --
-------- ------ -------- ----------- -------
------- ------- ------- ----- ---- ------- -
-------- ------
-
---- -
------------ --
-
--- -- -
----------- -----
-
----------- - -
------- -----
-
------------------ -----------------
--------- ------- -
-------- ---
-------- -----
-
----- -
---------------- ---------
--------------- --
-Normalize.css
--- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- --------------------- ----- -- - -- ---------------------- ----- -- - -- ----------------- ----- -- - -- ----------- ----------- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- ----------- ----------- - -- -------- -------------------------------------------------------------------------- -- --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- -
结论
CSS Reset 对于前端工程师来说是一项必备的技能。使用合适的 CSS Reset 可以提高开发效率、降低维护成本。当我们选择一个 CSS Reset 时，需要仔细阅读 Reset 的源码，了解其中的实现细节，并根据项目需要进行二次定制。CSS Reset 绝不能滥用，我们应该谨慎的选择修改哪些样式，避免造成不必要的影响。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671074285f551281026b2e89