CSS 样式和 Normalize.css

最近学习CSS，发现前辈们写代码之前都会先写个reset.css文件，清除默认样式。为了搞清楚reset.css的原理，我读了一些文章，收获颇丰。

关于CSS Reset 那些事（一）之 历史演变与Normalize.css

关于CSS Reset 那些事（二）之 Normalize.css 源码解读

关于CSS Reset 那些事（三）之 Normalize-zh.css 出炉

关于CSS Reset 那些事（四）之 构架CSS基础样式库

这位大神讲解的非常详细和全面，部分内容了解即可，无需全部记住。重要总结知识点如下：

---

一. CSS Reset的诞生与演变

1. 早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。 2004年，Tantek根据自身需要对于一些标签进行了简单的重置，早期的CSS Reset的作用就是清除所有浏览器默认样式，让它一切归零！

2. 很快，人们发现了CSS Reset存在的一些问题，比如：

        1）*{ margin:0; padding:0; }会带来性能问题

        2）使用通配符存在隐性问题

        3）过渡的标签重置等于画蛇添足

        4）过渡的标签重置导致语言元素失效

3. 面对争议，大牛Jonathan Snook提出No CSS Reset，核心是Less is more，不再提倡暴力归零方法。后来YUI更新了CSS Reset，配套了 cssfonts.css 和 cssbase.css。cssreset.css负责清除默认样式,而cssfonts.css和 cssbase.css 负责将一些元素的默认样式重设回来，这样就消除了之前的争议。

4. 但是国内前端工程师们很尴尬的发现，YUI 提供的 cssfonts.css 和 cssbase.css 只考虑了西欧文字，于是乎，大厂们就开始摸索制定属于自己的CSS Reset。

---

二. 替代品 Normalize.css 

Normalize.css 简介

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

目前Normalize.css 已经成为了CSS Reset的替代方案是无可争议的事情了。国内著名的AliceUI，AmazeUI 框架都是基于或者借鉴Normalize.css进行的制定化版本。

优势对比

前面讲到CSS Reset的核心作用就是清零，而且过于暴力；那么作为后者Normalize.css，到底有什么优势可以完全取代前者呢？

1.Normalize.css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 相比之下，Normalize.css保持了许多默认的浏览器样式。 这就意味着你不用再为所有公共的排版元素重新设置样式。 当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

2.Normalize.css 修复了浏览器的bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。 关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3.Normalize.css 修复了浏览器的bug

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

4.Normalize.css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

5.Normalize.css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

---

三、Normalize.css  源码解析

此部分内容均为重要知识点，请参考 开头推荐的文章系列（二）和（三）。

四、关于CSS 基础库

为什么要做CSS基础库？

思考以下场景：

1.假设你要做一个游戏单页面，网页上并不存在表单内容，那么你就要移除一些冗余的代码，开始自定义Normalize.css样式来满足自己的需求。

2.假设你要做一份文案策划的网页，包含很多文字排版时，此时Normalize.css也许并不完全适合你，因为它的默认字体设置和排版布局可能不能满足你的要求。

从以上场景可以看出，在构建大型网站的时候，我们可以把Normalize.css作为基础样式，然后根据不同的页面需求，进行添加样式覆盖它。

CSS 基础库到底包含什么内容？

我认为基础样式库 始终 能帮我们解决开发时遇到的一些基础性问题：

       1） 如浏览器样式不统一，需要重置样式；

        2）如基础表单样式过于难看不易操作，需要优化其样式；

       3） 如布局样式需要重复编写，需要一套稳定复用的解决方案；

        4）如一些样式的浮动，对齐操作，需要统一管理起来进行多次复用；

        5）如常见的CSS动画效果，需要统一起来管理方便复用；

        6）如一些常用的图标，需要一套可复用的字体图标；

        7）如需要打印，提供一套更为合理的打印样式

基础库初衷和未来方向：

        1）最大程度减少开发难度

        2）提供简洁高效开发体验

        3）趋于模块化样式构建规范

        4）做为未来UI组件库核心基础

        5）始终站在巨人肩上