CSS中的背背佳

CSS中的背背佳



无处不在的normalize.css

我已经不记得这是第几次遇到normalize.css这个文件了。它的身影开始出现在越来越多的网站上。现在就连用Visual Studio 2013开发一个Hello World Web应用也会用到它：新的web项目模板基于Bootstrap，而后者利用了nornalize.css。

其实normalize.css，这个8kb大小的CSS文件，并不是什么黑科技。它应该被归为CSS Reset这类代码。要解释什么是CSS Reset，不如我们来举几个例子。

例1

很久以来IE都使用一个古老的默认样式：给每个被<a>包围的图片都套上一个2px的深蓝色边框。这实在是一个太过气的样式。只有在两种情况下你会遇到有网站在用这个样式：作者太挫；或者作者太牛。如下是GNU教父Richard Stallman的网站，他用了这个Style。（或者是他从来没有用IE打开过网站）

所以几乎每个人都会在自己网站的CSS文件中把这个默认样式覆盖掉，例如改为无边框的样式。normalize.css就包含了这么一个样式，帮我们免去了一桩例行公事。

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

例2

再比如normalize.css加入了默认字体的配置，避免了不同语言环境和浏览器下的默认字体差异。

/**
 * 1. Set default font family to sans-serif.
…
 */

html {
  font-family: sans-serif; /* 1 */
…

}

它将默认字体设为sans-serif，更多地是因为这个字体在各个平台上都被支持，并不是因为它在任何时候都最美观。比如对于中文网站，使用宋体或者微软雅黑等中文字体会效果更好。你可以继续在你的CSS文件中覆盖normalize.css中的默认字体。

所以normalize.css文件就包含了许多这类琐碎的CSS reset。一句话概括，它就是CSS中的背背佳。背背佳让所有的孩子都能腰板挺拔，而normalize.css能让不同的浏览器都表现出一个相似的初始CSS样式。

顺便提一下，已经有网站http://www.iecss.com整理了各个版本IE的默认样式差异。需要的话可以参考。

其他的CSS Reset方案

这个世界当然不会只有一种CSS Reset方案。网站www.cssreset.com就列举了包括normalize.css在内的五种CSS reset方案。

• Eric Meyer's "Reset CSS" 2.0
• HTML5 Doctor CSS Reset
• Yahoo! (YUI 3) Reset CSS
• Universal Selector'*' Reset
• Normalize.css 1.0

更不要说其他更多无名的方案。比如说在ASP.NET MVC 4.0模板的site.css里面，就也有类似的内容：

body {
…
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
…
}

那么问题来了：为什么大家都爱用normalize.css？为什么其他人写的CSS Reset都没有normalize.css那么流行？

我们从不同侧面来揭示其中的缘由

要有个好名字

Normalize.css这个文件名实在太高大上，太形而上，太充满庙堂之气了。我都不知道该怎么翻译它？“归一化”？反正我第一反应是大学课本中的“正态分布”这个词……

起名字不容易，那实在想不出满意的，叫阿猫阿狗，苹果锤子粗粮的也行啊。可不起名字就是作者自己的不对了。没名字还让别人怎么记住你。但如果你觉得没有人会忘记起名字，那么如果我告诉你在上面的5个项目有3个没有项目名字，你会怎么想？

Eric Meyer's "Reset CSS" 2.0 这个难记的名字是www.cssreset.com给起的。代码的作者Eric Meyer没有给它起名字。Eric是一个高产的计算机图书作者，著作包括《CSS： The definitive Guide》、《Cascading Style Sheets 2.0 Programmer's Reference》等等。这段代码最先出现在Eric Meyer的某本书当中。和所有书上的示例代码一样，它没有名字。

其实Eric是额外还把这段代码贴在自己的博客上的。1.0版本完成于2008年2月，下载文件名叫reset200802.css。这完全是个奔着默默无闻去的名字。2.0版本没有下载链接，谁想用就自己复制粘贴吧。

HTML5 Doctor CSS Reset 它是一个基于Eric Meyer版本的扩充版本。作者HTML5 Doctor是一个关于HTML5的咨询机构的网站，所以扩充的内容都是围绕HTML5的：它针对很多HTML5中的新标签（tag）额外做了reset。如果搜索“HTML5 Doctor CSS Reset”，得到的就是发布代码的那篇博客。同样没有命名，同样谁需要就自己复制粘贴。

Universal Selector'*' Reset 这是一段类似下面这样的无名代码。花括号里面可能会有更多的内容。一百个人会有一百个写法。包括cssreset.com在内，都建议绝对避免这种实现，因为性能太差。

* {
	margin: 0;
	padding: 0;
}

要差异化

济公活佛是个开荤的和尚。姜太公就是要用直的钩钓鱼。做手机的说自己做的是情怀。就连农夫山泉也说他们不生产水，而是大自然的搬运工。Normalize.css的差异化在于：它拒绝承认自己是CSS Reset中的一种。

如果你搜索“normalize.css CSS Reset”，下面这条StackOverflow上的问答总会出现在第一页的某一行。显然这会给很多准备了解normalize.css的人留下深刻的第一印象。

上图的亮点在于回答者Nicolas就是normalize.css的作者本人。这其实是个有王婆卖瓜嫌疑的回复。（我承认当我发现这点的时候，得意了好一阵子）但面对这条来自印度班加罗尔的，有点哈士奇特质的提问，Nicolas并没有做一个死扣定义的学究，而是顺水推舟，5个排比和375个顶，瞬间让normalize.css的形象达到了必须和CSS Reset本身划清界限的程度。他是那么在乎这个回答，以至于6个月后的某个深夜还编辑了自己回答的内容。哦，我好像第一次提起的normalize.css的作者是Nicolas。我们最后再慢慢聊这个人。

写到这里，我要郑重地宣布JuntaoV5.com的差异化宣言：这不是一个技术博客。（此处有掌声五分钟）

要自立山头

Normalize.css虽然只有一个代码文件，却有专门的GitHub项目页面。从一个.css文件升格成为一个项目，就像是登上了井冈山，有了根据地。根据地是如此重要，以至于即使normalize.css的版权页仅有一行长，也要包含项目的URL

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

项目主页的目的只有一个：让尽可能多的人用你的代码。Normalize.css是个出色的例子。

页面很短，内容很紧凑。

首先：名字。是的，你项目的名字。要毫不犹豫地，放在最显眼的位置。心里想着就当打开这个页面的人什么都没带走，也至少今后能眼熟你项目的名字。

其次：介绍你的项目。记住，一（bie）定（gen)要(ta)高(jiang）大（ji）上（shu）。什么modern, HTML5, consistently, in line with, precisely targets这样的词汇统统都堆上去。就是不要出现代码，有代码你就low了。解释CSS Reset的原理，那是Eric的书要去负责的事情。

然后就是下载信息，各种下载信息。HTTP，npm, component, bower, Git，你能想得到的都要贴上去。既然做了项目就是为了让尽可能多的人用，要用就要先下载，所以要想方设法地让人下载。

已经有N多的著名网站和框架用了normalize.css，这样的信息显然有助于提高潜在用户的下载转化率，所以也要醒目地列出来。这感觉就像是水果店开业时门口一定要摆满花篮，楼盘封顶时墙外一定要挂满条幅。

那如果那人今天就是不想下载怎么办？给他twitter的一键关注。只要他关注了，今后总不愁会被带回来。

最后签署你的大名，能带上小伙伴就带上小伙伴。2个人的项目相比1个人的项目，会让人有信心得多。

难免有特别关注细节的人，所以Nicolas也给了一个到About页面的链接。About页面包含了更多更详细的信息，从原理到How-to都有。作为总结，他在全页面的最后贴了一块Responses on Twitter。猜猜第一条是谁写的？Eric Meyer！内容是关于“CSS: reset or normalize?”顺着链接点进去，你会看到Eric在全文的末尾大声疾呼：“为你的css reset项目改用normalize.css吧！”嗯哼……

所以你看，当你有了山头有了根据地之后，就可以做这么多东西。所以不要再傻傻地在博客里面说：“嗨，我今天实现了一项黑科技，代码我都贴出来了，大家觉得我厉害的话就点赞吧”。

作为比较，那篇用来发布“HTML5 Doctor CSS Reset”的博客拥有惊人的251条回应。作者的信息很突出，技术的讨论也很热烈。就是不知道有多少人会真的用。当然HTML5 Doctor其实是从一个不同的出发点，做了正确的事，达到了期望的效果：他们是一家咨询及培训机构，通过这篇博客，讲师Richard Clark的技术实力，在受众的心中站住了脚。

要经得起现实项目的检验

写书和做咨询的人写代码，主要是为了阐述书中或者博客中的概念，体现自身的技术能力。Eric的书没有涵盖HTML5，所以他就没有在自己的CSS Reset中加入和HTML5相关的内容。书中的代码总是点到为止，刚好够用，否则读者是会投诉作者在贴代码刷页数的。计算机图书和博客圈的世界，纯粹又完美。而真正能用于生产的代码，会展现出不一样的风貌。

Inside Every Book Lies the Heart of an Author - K.D. Rausin

前面的几点都在务虚；而normalize.css能流行起来，并被广泛用于生产代码中，一定还有它硬碰硬的原因。

内容更完善。Normalize.css远比其他实现更像一个可以被用于生产的项目，从内容角度就有很好的体现。css文件本身的内容很模块化，且每块内容都有详细的注释。比如：

/** 
 * Known limitation: by default, Chrome and Safari on OS X allow very limited 
 * styling of `select`, unless a `border` property is set. 
 */ 


/** 
 * 1. Correct color not being inherited. 
 *    Known issue: affects color of disabled elements. 
 * 2. Correct font properties not being inherited. 
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 
 */ 


button, 
input, 
optgroup, 
select, 
textarea { 
  color: inherit; /* 1 */ 
  font: inherit; /* 2 */ 
  margin: 0; /* 3 */ 

}

同时项目中还能发现其他辅助性的文件。

其中最有意思的是那个test.html文件，这是一个经过认真编写且不断更新的单元测试文件。每次改动normalize.css后，都能用test.html来做验证。如果你有兴趣点开，会看到如下的结果。只有面向生产实际的代码，才会拥有这些“琐碎”的内容。

就连YUI，虽然它有自己的CSS Reset，也不得不佩服并推荐normalize.css

If you currently use CSSBase, consider shifting to using Normalize.css instead. Normalize.css contains a superset of the styles that are in CSSBase. In addition to styles for standard typographic elements, Normalize includes sane defaults for forms, lists and buttons. If you were relying on a contextual CSSBase, you can pull down the contextual Normalize.css on your page instead.
--http://yuilibrary.com/yui/docs/cssnormalize/

社区的活跃度罗马不是一天建成的。活跃的社区是项目不断提高的推动力。让我们先用一个表格从宏观层面比较一下normalize.css和HTML5 Doctor CSS Reset这2个项目。（是的HTML5 Doctor CSS Reset的作者Richard除了那篇博客，还把代码发布在了Google Code上。）

	Normalize.css	HTML5 Doctor CSS Reset
项目名字	Normalize.css	html5resetcss
发布网站	GitHub	Google Code
建立时间	2009年	2011年
最后一次发布时间	2014年10月	2010年9月
Commits	229	N.A.（谁告诉我Google Code怎么看commits）
Contributors	13	1
Branches	3	1
Releases	17	9
Issues （包括已经解决的）	217	6

从微观层面看，normliaze.css的响应速度快。例如：最近一次issue是有人提了个issue，结果有个人（不是Nicolas本人）当天就回了，然后大家都很高兴，觉得那都不是事儿。

再比如有一些commit很有意思，比如有人说下面的注释要改了：

* Address styling not present in IE 8/9, Safari 5, and Chrome.

于是就立马改成了下面的内容

* Address styling not present in IE 8/9/10/11, Safari, and Chrome.

背靠大树好乘凉

到了这个份上，只有一个疑点了：“我能理解为什么Eric Meyer's "Reset CSS" 2.0，HTML5 Doctor CSS Reset，Universal Selector'*' Reset都没有像normalize.css那么有名气，可是你怎么解释那5个CSS Reset选项中的最后一个：“Yahoo! (YUI 3) Reset CSS”，为什么也没有normalize.css那么流行？YUI可是一个很大的业界项目啊？答案不复杂：“Yahoo! (YUI 3) Reset CSS”的式微是由于YUI不景气。YUI最近已经宣布停止发展了。YUI的CSS Reset没有名字，没有山头，所以也就跟随整个YUI框架一起远去了。

Normalize.css的大树是Twitter。正如一开始说的那样，Twitter的浏览器前端基于bootstrap框架，而bootstrap采用了normalize.css作为它的CSS Reset。Twitter无论是从应用的前沿性，技术的复杂度，还是业界的影响力等方面，都足以成为normalize.css背靠的大树，帮助它感染别的项目。

最后的最后，那么是什么让Twitter决定采用normalize.css的呢？答案还得从Twitter找，让我们来了（ba）解（gua）了（ba）解（gua）normalize.css的作者Nicolas。我滚了好几屏Nicolas发的推。我能知道的是：他差不多在两年前搬去了旧金山。他经常推NASA发布的关于气候变化的研究报告，但他其实经常满世界飞来飞去。他现在在Twitter负责写CSS。Nicolas发的推不少，比如下面这条我就比较喜欢：

嗯？停！回退！刚才我说了什么？“他现在在Twitter负责写CSS”。哦。【The End】