做了这么久的前端开发，也并没有去较真normalize.css与reset.css的区别，是因为它们之间真的没有区别吗？并不是，也许是自己对本真的诉求没有那么强烈了吧！本文就带你一探这两个东西的究竟。

normalize.css

根据官网的定义： normalize.css是一个现代的，为HTML5准备的reset.css的替代品。它可以使元素的渲染在多个浏览器下都能保持一致并且符合规范。它所瞄准的，也都是些需要规范化的样式。

可以通过npm的方式将normalize.css引入到你的项目中。

npm install normalize.css

Normalize.css的目标

1. 保留有用的浏览器默认样式，而不是一概将它们“抹杀”。
2. normalize.css作用在范围更广的元素上面。
3. 修正了一些bug及主流浏览器在渲染上的不一致。
4. 提高了可用性。
5. 用更加详细的文档及注释来解释代码的含义。

normalize.css支持更多的浏览器（包括手机端），同样也包括规范的HTML5元素，排版，列表，内嵌内容（embed），表单及表格的css。例如：

normalize.css下面的 ul

reset.css下面的 ul

借用一位知友的话说就是，reset是革命党，normalize是改良派。reset的方针就是都tm给我脱光光，老子今天要翻牌。什么豹纹，蕾丝，美颜相机统统给我拿掉，老子读书少，都别骗我。于是，一个个屌丝心中的女神都重拾了素颜，但回到本真又能怎样？那两厘米的粉底不都是为了你？于是，在旁边的normalize看不下去了。它主张生活不必处处追求真实，有时应该睁一只眼，闭一只眼。

normalize VS reset

• normalize.css保存了部分可用的默认样式

reset.css为几乎所有元素统一了样式风格，但normalize保存了一些有用的默认样式，这样你就不用再对一些公共的排版元素重新声明样式。比如ul元素的margin。

• normalize.css修复了一些bug

normalize修复了一些常见的PC端及移动端的bug，这往往超出了reset的能力范围，这里包括了HTML5元素的显示设置，修正了预格式化文本的字体问题，在IE9上的SVG overflow 问题以及不同浏览器和操作系统与表单之间的问题。

• normalize.css不会使你的调试工具混乱

在页面中调试样式的时候，如果使用了reset.css，在样式调试区域就会出现大量的继承属性链，但normalize.css并不会出现这个问题，因为它的样式规则使用的是具有针对性的样式及相对保守的使用多重选择器。

• normalize.css可以模块化

normalize 可以被分成多个独立的部分，也就是说你可以指定你自己需要的默认样式，同时，你的项目不需要哪些样式，可以对其进行删除。

• normalize提供了大量的文档

normalize的代码基于非常细致的跨浏览器的研究和系统的测试，在 https://github.com/necolas/normalize.css 上面提供了详细的注释，这样你就能知道每行代码做了什么，为啥它会被包含进来，以及浏览器之间的差异，还有就是更容易你自己去进行测试。

参考

http://nicolasgallagher.com/about-normalize-css/

扫码关注w3ctech微信公众号