从 normalize.css 到 reset.css：CSS Reset 的演变与哲学

在前端开发中，CSS Reset 是一种重要的技术实践。它的目的是通过重置、规范化浏览器样式来解决跨浏览器之间的差异，保证网页样式的一致性。近年来，Normalize.css 和 Reset.css 两种CSS Reset 方案备受关注，本文将从它们的背景、特点、使用等方面探讨其演变与哲学。

1. 背景

在 Web 开发的初期，浏览器的样式规则十分简陋，甚至互不兼容。为了解决这一问题，前端工程师开始尝试使用 CSS Reset 来消除浏览器间的差异，保证网页的一致性。最早的 CSS Reset 方案可以追溯到 2003 年，由 Eric Meyer 提出的『Eric Meyer’s Reset CSS』。它将所有的 HTML 元素的 margin 和 padding 设置为0，并且不断地重写一些其他的样式，达到消除不同浏览器间的差异的目的。

不过，Eric Meyer 的 Reset.css 仍然存在一些问题，比如并不能覆盖所有浏览器的特性，或者会出现无效的样式等。因此出现了类似 Normalize.css、Reset.css 等新的 CSS Reset 方案。

2. Normalize.css

Normalize.css 是由 Nicolas Gallagher 与 Jonathan Neal 于 2011 年联合编写的一款流行的 CSS Reset 方案。与传统的 CSS Reset 不同，Normalize.css 并不是将所有元素的样式重置为0，而是将 HTML5 元素的默认样式纳入考虑之中，保证了在各浏览器间的差异更加符合我们的预期。举个例子，在 Normalize.css 中，<h1>元素的字体大小默认为 2em，而在传统的 CSS Reset 中则是 18pt。

Normalize.css 的一些特点如下：

1. 保留了有价值的默认样式，比如 HTML5 中新加入的语义化标签样式。
2. 修复了已有元素之间的一些不一致问题。
3. 优先级高于浏览器默认样式，避免出现一些非预期的样式。

我们可以通过 CDN 引入 Normalize.css ，当然，也可以直接修改其源代码。

----- ---------------- --------------------------------------------------------------------- --

3. Reset.css

Reset.css 是另一种很受欢迎的 CSS Reset 方案。它的思路就是把所有的默认样式都归零，让每个元素从开始再定义一次样式属性，避免浏览器样式默认行为的干扰。

为了达到这个目的， Reset.css 会将所有标签都设置为无边框、无边距、无内边距，并将一些元素的默认行为覆盖掉。以下是重置 <h1> 标签的样式。

-- -
   ------- --
   -------- --
   ---------- -----
   ------------ -------
-

其中 font-size: 100% 的作用是让h1 元素的字体大小与其父级元素相同，达到更好的适应性。

4. 如何选择适合的 CSS Reset

选择适合自己项目的 CSS Reset 方案，需要考虑项目的真实情况以及自身习惯等因素。以下是一些帮助选择的因素：

1. 样式细节要求：如果要避免浏览器默认样式的影响，使用 Reset.css 较好；如果希望保留部分浏览器默认样式并进行一定程度上的规范化，可以选择 Normalize.css。
2. 接纳度：对于多人协同开发的项目来说，使用广泛、被接纳度高的 CSS Reset 方案较好，减少团队成员之间出现不必要的讨论和争执。
3. 实际需求：如果我们的项目需要用到一些特殊的样式，如重置表单元素的样式等，需要自定义并添加相应样式的 Reset.css 是更好的选择。

5. 总结

CSS Reset 是前端开发中很重要的技术实践之一，选择适合的 CSS Reset 方案也是提高前端开发效率的关键。本文通过介绍了 Eric Meyer’s Reset CSS、Normalize.css、 Reset.css 三种 CSS Reset 方案的背景、特点、使用等方面的内容，希望可以对读者提供一定的指导意义。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64c604d54908f32798b1fe40