谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
q:before, q:after {
    content: '';
}
abbr, acronym {
    border: 0;
}

首先，咱们要知道 CSS RESET 的目的是什么？是为了消除不一样的浏览器在默认样式上不一样表现，可是到今天，现代浏览器在这方面的差别已经小了不少。

reset.css 存在的问题

看看第一段：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

这一条样式的目的是在于，清除元素的默认 margin 和 padding 。

可是这一段代码是充满问题的。

诸如 div 、dt、li 、th、td 等标签是没有默认 padding 和 margin 的；
若是我如今问你 fieldset 是什么标签，可能没几我的知道，类似的还有如 blockquote 、acronym 这种很生僻的标签，在 html 代码中基本不会出现的，其实没太大必要 RESET ，只会给每一个项目徒增冗余代码；

上面的意思是，这一段代码其实作了不少无用功！

要知道，CSS RESET 的做用域是全局的。咱们都知道在脚本代码中应该尽可能避免滥用全局变量，可是在 CSS 上却老是会忘记这一点，大量的全局变量会致使项目大了以后维护起来很是的棘手。

再看看这一段：

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}

这一段代码，目的是统一了 h1~h6 的表现，取消了标题的粗体展现，取消了列表元素的项目点。

好像没什么问题，可是诸如 h1~h六、ol、ul 这些拥有具体语义化的元素，一旦去掉了它们自己的特性，而又没有赋予它们自己语义化该有的样式（常常没有），致使愈来愈多人弄不清它们的语义，侧面来讲，这也是如今愈来愈多的页面上 div 满天飞，缺少语义化标签的一个重要缘由。

YUI 版本的 reset 无论高矮胖瘦，一刀切的方式，看似将全部元素统一在同一块儿跑线上，实则是多了不少冗余代码，得不偿失。

因此，YUI 的 reset.css 的诸多问题，催生出了另外一个版本的 reset.css ，名为 Normalize.css。

Normalize.css

Normalize.css 有着详尽的注释，因为篇幅太长，能够点开网址看看，本文不贴出所有代码。

normalize.css v5.0.0

Normalize.css 与 reset.css 的风格刚好相反，没有无论三七二一的一刀切，而是注重通用的方案，重置掉该重置的样式（例如body的默认margin），保留该保留的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺少的。

Normalize.css 作了什么

Normalize.css 注释完整，每一段代码都说明了做用，总结来讲，它作了如下几个工做（摘自官网）：

Preserves useful defaults, unlike many CSS resets.
Normalizes styles for a wide range of elements.
Corrects bugs and common browser inconsistencies.
Improves usability with subtle modifications.
Explains what code does using detailed comments.

简单翻译一下，大概是：

统一了一些元素在全部浏览器下的表现，保护有用的浏览器默认样式而不是彻底清零它们，让它们在各个浏览器下表现一致；
为大部分元素提供通常化的表现；
修复了一些浏览器的 Bug ，而且让它们在全部浏览器下保持一致性；
经过一些巧妙的细节提高了 CSS 的可用性；
提供了详尽的文档让开发者知道，不一样元素在不一样浏览器下的渲染规则；

真心建议各位抽时间读一读 Normalize.css 的源码，加上注释一共就 460 行，多了解了解各个浏览器历史遗留的一些坑。

关于取舍

那么，最后再讨论下取舍问题。是否 Normalize.css 就真的比 reset.css 好呢？

也不见得，Normalize.css 中重置修复的不少 bug ，其实在咱们的项目中十个项目不见得有一个会用得上，那么这些重置或者修复，某种意义上而言也是所谓的冗余代码。

我以为最重要的是，拒绝拿来主义，不要人云亦云，看见别人说这个 reset.css 好用，也不了解一下，拿来就上到项目中。又或者说写代码几年了，知道每次都引用一个 reset ，却从没有去细致了解其中每一句的含义。

关于维护

当团队根据项目须要（可能混合部分了 reset 或者 normalize ）编写了一份适合团队项目的 reset 以后，随着不断的迭代或者说是复用，颇有可能这个版本的 reset.css 会逐渐添加许多其余的全局性的样式，从而又从新陷入上面说的那些问题。

因此我以为，reset.css 也是须要维护的，关于最佳的 reset.css ，没有一劳永逸的方案，根据项目灵活配置，作出取舍微调，适量裁剪和修改后再使用。

最后，搞技术的同窗仍是应该要有所追求，不要知足于消费别人的总结，必定要去源头看看。

到此本文结束，若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。