Normalize.css vs Reset.css

Normalize.css 相比于传统的 CSS reset 来说，它是一种现代的、为HTML5准备的优质替代方案。它使浏览器更佳一致的呈现所有元素，并且符合现代标准，它只针对那些需要规范化的样式。它非常非常的轻量级，以至于源代码也只有 6KB 左右。现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

概述

Normalize.css 是一个 CSS resets 代替方案。经过 @necolas 和 @jon neal 花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

Normalize.css 的目标：

保护有用的浏览器默认样式而不是去掉它们；
正常化样式来服务于更多的 HTML 元素；
修复浏览器的 Bug并确保浏览器的一致性；
优化可用性通过细微的改进；
解释代码通过注释和详细的文档；

它支持大部分浏览器（包括移动端浏览器），包括规范了 HTML5 元素、排版、列表、嵌入内容、表单和表格的 CSS。

尽管该项目基于规范化原则，但是还是在适合的地方使用了更佳实用的默认值。

Normalize vs Reset

我们是有必要去了解更多的关于 Normalize 和传统的 CSS resets 之间的区别的：

Normalize.css 保护有用的默认值

Resets 几乎将所有元素的默认样式重新设置，强行将默认样式设置了同样的视觉效果。相比于 Normalize.css，它保留了浏览器的许多默认样式。这意味着你不必为所有常见的排版元素重新声明样式。

当 HTML 元素在不同的浏览器中有不同的默认样式时，Normalize.css 的目的在于让这些样式更佳的一致并符合现代浏览器的标准。

Normalize.css 修复了浏览器的 Bug

它解决了桌面和移动端浏览器的常见 bug，当然这些 bug 超出了 Resets 的范围。这些 bug 包括 HTML5 元素的显示设置、预格式化文本的字体大小、IE9 中 SVG 的溢出以及浏览器和操作系统中众多表单相关的 bug。

例如，下面是 Normalize.css 修复了 HTML5 input 的 search 类型的跨浏览器一致性和样式的 bug：

/**
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Removes inner padding and search cancel button in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

Resets 通常错误的将所有浏览器都一致的设置元素的呈现方式。特别是对于表单来说，Normalize.css 会提供更佳重要的帮助。

Normalize.css 不会让你的调试工具杂乱无章

使用 Reset 时，最大的灾难是在浏览器 CSS 调试工具中使用大段的继承链。

在 Normalize.css 中不会存在这样的问题，因为在我们的准则中对多选择器的使用是非常谨慎的，我们只会有目的地对元素设置样式。

Normalize.css 是模块化的

这个项目已经拆分成多个相对独立的部分，让你更佳容易的区分哪些元素设置了特定的样式。此外，它可以让你去除你不需要的部分（例如，表单模块）。

Normalize.css 拥有丰富的文档

Normalize.css 的代码是基于跨浏览器的设计和系统性的测试。它在 Github Wiki 上有详细的文档和说明。这意味着你可以知道每一行代码的意义：为什么有这些代码、浏览器之间的不同并且可以简单的运行在自己的测试中。

这个项目旨在帮助人们了解浏览器如何在默认情况下渲染元素，并且使得它们更佳容易参与和改进。

如何使用

首先，安装或者从 GitHub 中下载 Normalize.css，接下来有两种途径来使用它：

用 Normalize.css 当作你自己的基础样式，自定义样式值来符合设计师的标准；
引入 Normalize.css 源码并从基础上开始构建，有必要时需要用到你自己的 CSS 覆盖默认值。

结束语

Normalize.css 在适用范围上与 CSS reset 上有很大的不同之处。我们值得尝试一下，看看它是否符合你的开发方式和偏好。

〖坚强的一俢〗