在前端开发中，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 的一些特点如下：
- 保留了有价值的默认样式，比如 HTML5 中新加入的语义化标签样式。
- 修复了已有元素之间的一些不一致问题。
- 优先级高于浏览器默认样式，避免出现一些非预期的样式。
我们可以通过 CDN 引入 Normalize.css ，当然，也可以直接修改其源代码。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css" />
3. Reset.css
Reset.css 是另一种很受欢迎的 CSS Reset 方案。它的思路就是把所有的默认样式都归零，让每个元素从开始再定义一次样式属性，避免浏览器样式默认行为的干扰。
为了达到这个目的， Reset.css 会将所有标签都设置为无边框、无边距、无内边距，并将一些元素的默认行为覆盖掉。以下是重置 <h1> 标签的样式。
h1 {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
}其中 font-size: 100% 的作用是让h1 元素的字体大小与其父级元素相同，达到更好的适应性。
4. 如何选择适合的 CSS Reset
选择适合自己项目的 CSS Reset 方案，需要考虑项目的真实情况以及自身习惯等因素。以下是一些帮助选择的因素：
- 样式细节要求：如果要避免浏览器默认样式的影响，使用 Reset.css 较好；如果希望保留部分浏览器默认样式并进行一定程度上的规范化，可以选择 Normalize.css。
- 接纳度：对于多人协同开发的项目来说，使用广泛、被接纳度高的 CSS Reset 方案较好，减少团队成员之间出现不必要的讨论和争执。
- 实际需求：如果我们的项目需要用到一些特殊的样式，如重置表单元素的样式等，需要自定义并添加相应样式的 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