在前端开发中，CSS（层叠样式表）是非常重要的一环。而 CSS Reset，也称为 CSS 重置，是指一种将所有 HTML 元素的默认样式归零的技术，从而使在不同浏览器中呈现的样式更加一致。在这篇文章中，我们将回顾 CSS Reset 的历史，讨论最新的实践，并提供示例代码。
CSS Reset 的起源
早期的网站开发者常常遇到一个问题——在不同的浏览器上，同一个 HTML 元素（如按钮或表格）所呈现的样式不同。这是因为浏览器厂商为不同元素定义了不同的默认样式。 于是，为了消除浏览器之间的差异，网站开发者们开始创建所谓的 CSS Reset。
最早的 CSS Reset 叫做 Eric Meyer’s Reset CSS，它由 Eric Meyer 创造，于 2000 年发布。这个 CSS Reset 能够消除浏览器内置样式，使得所有 HTML 元素在不同浏览器中的呈现基本一致。Eric Meyer’s Reset CSS 由于其实用性和实用性，在当时的前端开发者当中十分流行。
CSS Rest 的问题
虽然 CSS Reset 可以消除浏览器厂商的默认样式，统一各种元素的外观表现，看起来是一个很好的解决方案，但它并没有完全解决所有问题，其中存在一些问题，这些问题是：
1. 代码量过大
CSS Reset 消耗了大量的开发资源，在逐个定义每个 HTML 元素的样式时，会增加大量的代码和工作量。
2. 过于笨重
对于那些已经有自己的 CSS 样式的开发者来说，直接给 HTML 元素定义新的样式，只会使代码变得笨重，从而引发新的问题。
3. 不一定符合我们的需求
构建 Web 应用程序的目的是为了满足我们自己的需求。而 CSS Reset 可能会完全替换我们原本自己定义的 CSS 样式，从而让我们的代码被压缩，而这与我们的初衷是相驳的。
CSS Rest 最佳实践
1. Normalize.css
为了解决 CSS Reset 的问题，Nicolas Gallagher 和 Jonathan Neal 设计了一个新的 CSS Reset 工具，名叫 Normalize.css。它采用了一种更为智能的重置方案，针对所有浏览器的一般规则做出了更好地取舍，尤其是最终输出的 CSS 不会完全覆盖已有的代码。
Normalize.css 是一种优秀的重置保留解决方案，具有以下特性：
- 适应 HTML5 的所有元素，并显示出最好的默认外观。
- 标准化后的元素显示方式大多接近 Web 标准，避免了某些元素的默认样式存在疑问。
- 不会覆盖我们自己编写的样式。
- 解决了大部分 Firefox 的新版本出现的问题。
2. 使用时机
在项目开发时，CSS Reset 是必不可少的。在这一点上，Normalize.css 提供了一个很好的解决方案。Normalize.css 的设计可以较好地消除浏览器之间的差异，做到更好地跨浏览器呈现。Normalize.css 相对于其他 Reset 工具，易于使用，代码简洁。
不过，如果你选择不使用 CSS Reset，只需明确你的项目的需求和目标。在一些比较小的项目中，直接编写样式很可能更容易快捷；你可以直接将元素样式定义为最重要的元素样式所关注的东西。
示例代码
下面是一个使用 Normalize.css 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
---------- ----- -------------
---- -- ------------- ---
----- -------------------------------------------------------------------------- -----------------
---- --- --- ---
----- ----------------- -----------------
-------
------
--------
----- ---- ---------
---------
-----
----
------ ------------- ------------
------ ------------- ------------
-----
------
---------
------- -------------
----- ------- --- --------- -------------
----
----------- --------
----------- --------
----------- ----------
-----
----------
--------
------------ ------ --------
---------
-------
-------这个示例展示了 HTML 结构，包括头部、导航、内容部分以及底部。通过将 Normalize.css 插入 HTML 中，我们可以消除不同浏览器之间的样式差异，使网站的外观在各个浏览器中表现一致。
-- -------------------- ---- ------- -- ---------- -- ---- - ------------ ---------- ------ ----------- ------------ ---- ------ ----- - ------- ---- -------- ------ - -------- ---- ------- --- ----- ----- ------- ----- -- - ------ -- - ---------- ---- - --- -- - ----------- ----- ------- -- -------- -- - --- -- - -------- ------------- ------------- ---- - --- - - ------ ----- - --- ------- - ---------------- ---------- - ------- -- - ---------- ------ ------------ ----- ----------- -- - ------- - - ------- -- ------ ----- - ------- -- - ----------- ----- ------- -- -------- -- - ------- -- - -------------- ------ - ------ - ---------- ------ ----------- ------- -
这是自己编写的 CSS 样式，通过在 head 中引入该文件，即可将样式应用到 HTML 元素中。
总结
CSS Reset 是前端开发中必不可少的一部分，因为不同的浏览器会导致样式的差异，因此消除浏览器默认样式是一项重要的任务。尽管 Eric Meyer’s Reset CSS 可以消除浏览器的默认样式，但这种方法存在一些问题。相较之下，Normalize.css 更为智能、易用且代码更简洁，更胜一筹。判断是否该使用 CSS Reset 需要根据项目的规模和要求，以及开发者的能力和经验，做出正确的决策。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64716ce9968c7c53b0f4a622