在编写前端页面时，一个常见的问题就是如何消除不同浏览器对 HTML 元素的默认样式。这时候我们就需要使用 CSS Reset，但是如何选择一个最佳的 CSS Reset ？这里提供一些指导意义，帮助你选择最适合你项目的 CSS Reset。
什么是 CSS Reset？
CSS Reset 是一种 CSS 文件或代码片段，它通过重置或覆盖浏览器的默认样式，确保所有元素在不同浏览器下呈现一致的样式。 一般来说，CSS Reset 建议在你的 CSS 文件之前引入，以确保对默认样式的重置优先于其他样式的应用。
常见的 CSS Reset
Eric Meyer's Reset CSS
Eric Meyer 的 Reset CSS 被认为是最古老、最常用的 CSS Reset 之一，它覆盖了 HTML5 元素的样式，并通过设置所有元素的 margin 和 padding 为零，确保它们在不同浏览器下呈现一致的样式。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
Normalize.css
Normalize.css 是一款专业且易于使用的 CSS Reset 库，与 Eric Meyer 的 Reset CSS 不同，Normalize.css 尝试保持浏览器默认样式的正确性，只进行必要的样式重置，并通过设置通用的基础样式来保持一致性。
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- ---------------------------- ------- -- -- --- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------- ---- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ---- ------- -- --- --------- - -- ------- --- ------- -- -------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- ---- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ------- --- ---- ------ ----- -- --- -------- ----- -- -------- - ------------ ----- - -- ------ -------------------------------------------------------------------------- -- --- - ------ --- ------- -- --- --------- -- ----- - ---------------- --------- -
Modern CSS Reset
Modern CSS Reset 被认为是一种轻量的 CSS Reset，它尝试通过设置通用的基础样式来保持一致性，并修复了一些常见问题（例如， border-box 在所有元素上的异常值， underline 样式的处理方式等）。
-- -------------------- ---- -------
----- -
-- --- ------ ----- --
----------- -----------
-
--
----------
-------- -
----------- --------
-
-- ------ ------- ------- --
----------
--------- -
-------- --
-
-- ------ ------- ------ --
-----
---
---
---
---
--
-------
-----------
---
-- -
------- --
-
-- --- ---- ---- -------- --
---- -
----------- ------
---------------- -------
--------------- --------------
------------ ----
-
-- ------ ---- ------ -- --- -- -------- ---- - ----- --------- --
----------
--------- -
----------- -----
-
-- - -------- ---- ----- ---- - ----- --- ------- ------ --
-------------- -
------------------------- -----
-
-- ---- ------ ------ -- ---- ---- --
--- -
---------- -----
-------- ------
-
-- ------- ---- --- ------ -- -------- -- ------- --
------- - - - - -
----------- ----
-
-- ------- ----- --- ------ --- ------- --
------
-------
---------
------ -
----- --------
-
-- ------ --- ---------- --- ----------- --- ------ ---- ------ --- -- --- ---- --
------ ------------------------ ------- -
- -
------------------- ------ -----------
-------------------------- - -----------
-------------------- ------ -----------
---------------- ---- -----------
-
-在选择一个最佳的 CSS Reset 时，我们需要考虑一些因素。这里提供一些参考意见：
- 建议选择轻量的 CSS Reset，因为它们不仅通常更快，而且更不容易干扰自定义样式。
- 标准的 Reset 是一种优秀的选择，因为它们已经被广泛测试和使用，已验证其可靠性和可用性。
- 你可以选择一个你更熟悉或是提供了一些特定功能的 CSS Reset。
- 如果你的项目更加依赖基础样式，则 Normalize.css 可能更适合你。
- 如果你的项目更注重自定义样式，则建议选择 Modern CSS Reset。
总结
CSS Reset 是一个消除浏览器默认样式差异的重要工具。 不同的 CSS Reset 有不同的使用场景和特点，我们需要选择适合项目的 CSS Reset。 一般来说，选择一个标准的和轻量的 CSS Reset 往往是最好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64520a36675af4061b5babf1