reset 还是 normalize？

时间：2015-07-10 11:31:15 阅读：118 评论：0 收藏：0 [点我收藏+]

众所周知，浏览器会为我们创建基本的样式。比如<h2>，我们不需要为它写任何css样式，在浏览器上展示出来，一眼就只知道它是大标题。问题是，不同浏览器之间的默认效果不尽相同，于是乎，在Chrome下很漂亮的样式，去到Firefox下可能整个页面都变得一团糟（当然也有可能是其他原因）。

举个栗子，IE浏览器下的<ul>标签的margin-left值为30pt，但是在Firefox,Chrome,Safari下<ul>默认属性是padding-left:40px。所以我们需要考虑下浏览器兼容性。

Reset

这时候就有人提出来，这不是很简单吗，两句代码搞定。

* {
    margin: 0;
    padding: 0;
}

确实，使用这两个可以解决padding和margin的问题，而且现在国内挺多网站都是这么干的，但是这样做会带了很多痛苦的事。

浏览器负担增大，这很好理解，这里使用了通配符*，无论什么元素，你都要在默认的基础上强制设置margin和padding为0。(注意这里使用了强制)
整个页面变得很挤，没有了浏览器默认的呼吸间隔，页面会变得很拥挤，元素都挤在一块，很难看。
加载时间。。。我在网上找到这张图，自己看。
不酷=_=

基于上面的原因，有人提出了坚强版的解决方式。这就是Reset.css。

html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
 del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, sup, tt, var,
 b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, 
 figure, figcaption, footer, header, hgroup, 
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
 }

Reset.css确实帮了很大忙，它把大部分元素都重置了。通配符的问题也就不存在了。

但是，帅的人会认为，Reset的方式还是太生硬了，还有一个比较大的问题是你写一个div的时候，浏览器会生成很大一串重复的代码，特别是当很多个div嵌套的时候，这不利于我们debug。

##Normalize

Reset趋向于把大部分元素都设成没有加样式的状态，然而这造成我们需要在用到时去重写那大部分“没有样式”的样式…而Normalize.css则趋向于覆盖大部分浏览器异同的默认样式。无论你使用哪种方式，我们最终都需要书写我们自己的代码，但是Normalize会少一些，而且不会造成大量重复代码覆盖。

有人问会问，那Normalize 还是没有解决<ul>的问题啊，（额…上面的例子只是让大家知道浏览器有差异而已），这不是Normalize关注的问题。它不是要强制修改默认样式，而是认为<ul>本身就应该有左间距，这没什么大问题，等到要用的时候再去自定义。所以Normalize造好一个合适的轮子，造车你得自己来。

比如

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

注释写得很明白了(优点之一，其他优点可以看推荐阅读)，就是修复浏览器的异同。在某某浏览器上会有坑，这里修复掉，再去写你自己的样式表就安全多了。

Normalize.css现在被用得很广。Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks等等网站。

当然最终使用Normalize还是Reset，还得看具体项目和个人喜好了，你看着办。
最后希望日后再无浏览器兼容性问题。。。