Reset CSS 研究(八卦篇)
八卦为先
八卦是种优良品质,特别是用在技术上时。来看几个Reset CSS的八卦问题吧:
- 你知道世界上第一份reset.css在哪么?
* { margin: 0; padding: 0 }人品很坏吗?- Eric Meyer和YUI是情侣吗?
- Google有用reset.css吗?
- No CSS Reset的口号是谁最先提出来的?
类似问题或者说困惑还能列举很多,reset.css极其简单又极其不简单。继续挖掘八卦之前,请先关机遐思,或去如厕更衣透透气,想想后再读下文。
不是历史
2004年,遥远又如近在眼前的昨天,Tantek被不同浏览器下默认样式的差异搞烦了,于是琢磨中写了一个undohtml.css, 这就是第一个八卦问题的答案。
对于基于Gecko引擎的Firefox等浏览器,请在地址栏中输入resource://gre/res/html.css,默认样式就这样裸体着呈现在面前了。CSS界的Guru级人物Eric Meyer立刻就嗅探到了html.css的有趣性:Really Undoing html.css. 知道CSS好玩,实在没想到CSS居然这么好玩。比如style, script { display: block }就可以显示CSS和JS源码,在做代码演示的demo页时,就不用辛辛苦苦用pre或textarea了(虽然因为ie不支持导致不实用,不过这的确是个思路)。
继续八卦:CSS Negotiation and a Sanity Saving Shortcut. * { margin: 0; padding: 0 }的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的,并且作者建议一定要先破后立,要将清扫差异和重置默认样式结合起来,这样才是正确的做法。
为何Global White Space Reset当初风光一时,如今却黯然销魂?* { margin: 0; padding: 0 }的成功之处在于,管你三七二十八,统统抹平,人人生而平等!然而其失败之处也正是因为其威力太大,虽然捣了蜂窝得了蜜,却惹来群蜂追尾,麻烦无限(因为被抹平的样式,你得再重新设置回来,比如input的padding等)。这就如西汉一代名将韩信哪,是成也萧何,败也萧何!
还有一个传说中的说法是,星号*选择符还会导致性能问题。由于一直没找到可靠的资料,我又不知道怎样才能测试CSS选择符的渲染性能(知道的请一定告诉我),这个传说中的性能问题就只能当它是传说了。
眨眼一瞬间,三年就过去了。2007年,Eric Meyer的一篇文章Reset Styles, 重新唤起了一股reset热潮。这篇文章里有第3个八卦问题的答案:Eric的reset.css是源自YUI的,可能是母子关系,但总之不是情侣关系。
很快,Eric发布了第二版:Reworked Reset. 后面的解释极具价值,很多属性值的设置在这里有详尽说明。
火爆的回复给了Eric源源不断的动力:Reset Reloaded. 看完这篇文章,有一种尘埃落定的感觉。
但上面的文章并不是最终版本,2008年2月份,Eric Meyer还更新了一次:CSS Tools: Reset CSS
说完Eric Meyer的心路历程,不得不提一下YUI Reset CSS. 创始人是Nate Kokechley. 去年北京D2论坛上还见过一面,前不久已离开YAHOO,让我的直觉里对YUI都有点担心起来了,唉。
上面是两个最有名的CSS Reset方案。但世界永远是多样化的,比如Less is more – my choice of Reset CSS. 这和Eric Meyer的期望其实是一致的:不同的应用环境下,应该选择自己的reset方案,而不是简单的copy过去。比如Google首页,在这种特定页面里,不用就是一种最好的用。
更多眼花缭乱的Reset方案请参看:A Killer Collection of Global CSS Reset Styles. 很标题党,内容就鱼龙混杂了。
最后,隆重揭晓最后一个八卦问题的答案:No CSS Reset. 提倡的核心思想也是Less is more. 原因很简单,* { margin: 0; padding: 0 }杀伤力太大,在某些场合下,Eric Meyer的方案杀伤力也还是太大了。有想法并说出来,总是好的。
有反对就会有支持:Why I Like (and Use) Reset CSS. 公说公有理,婆说婆有理,并非所有问题都需要一个确切的答案,有时过程本身,就是追求的结果。
Eric Meyer对No CSS Reset一文的回复:Crafting Ourselves. 读罢此文,明月松间照,清泉石上流。下面摘录两段,做为此八卦闲文的完结:
Because this isn’t a field of straightforward answers and universal solutions. We are often faced with problems that have multiple solutions, none of them perfect. To understand what makes each solution imperfect and to know which of them is the best choice in the situation—that’s knowing your craft. That’s being a craftsman/craftswoman. It’s a never-ending process that is all the more critical precisely because it is never-ending.
…It’s evidence that we continue to challenge ourselves and each other to advance our skills, to keep learning better and better how better to do what we love so much.
预告:下一篇是技术篇,将详细探讨淘宝目前使用的Reset CSS方案,欢迎各位提前准备好板砖,我已购买坚固头盔一顶…… 敬请期待。
参考资料
- Really Undoing html.css(最早的时候叫做undohtml.css)
- CSS Negotiation and a Sanity Saving Shortcut(
* { margin: 0; padding: 0 }的源头) - Reset Reasoning
- Reset Styles(Eric Reset CSS的源头贴)
- Reworked Reset(勤快的Eric)
- Reset Reloaded(趋于稳定)
- CSS Tools: Reset CSS(这就是广为流传的Eric Meyer版reset css)
- YUI Reset CSS(和Eric Meyer版齐名的YUI方案)
- CSS techniques I use all the time
- Less is more – my choice of Reset CSS (永远不缺个性化的声音)
- A Killer Collection of Global CSS Reset Styles(大千世界,大开眼界)
- Tripoli – a CSS standard for HTML rendering(据说也是比较流行的一个方案)
- * { margin: 0; padding: 0; } No Longer Cool(提到了传说中的性能问题)
- No CSS Reset(反对的声音非常响亮)
- Why I Like (and Use) Reset CSS(支持的声音更加嘹亮)
- Crafting Ourselves(Eric Meyer对No CSS Reset的回应,非常好的一篇文章)
- CSS Tip #1: Resetting Your Styles with CSS Reset(描述了CSS Reset的需求及其发展史,是一篇非常不错的总结贴)
- 打造自己的reset.css(国人对reset.css的研究和总结,非常不错)

March 30th, 2009 on 23:57
沙发?期待下一篇发行。
March 31st, 2009 on 0:12
参考资料有够多的,比我毕业论文还多…
March 31st, 2009 on 0:33
嗯……我就喜欢听技术八卦……oh yeah, keep it coming baby.
March 31st, 2009 on 1:45
对于“星号*选择符还会导致性能问题”的传说,我也很期待会有朋友回复
March 31st, 2009 on 2:51
记得以前某个moziila的会上讲过reflow的东东,具体内容不太记得了,说页面渲染的过程是从各级标签一层层构建起来,而*号选择器对所有的元素都进行了设定,这个过程似乎就是导致性能问题的原因吧。
ps:纯属猜测,没有实际检验过
March 31st, 2009 on 8:45
雕兄每篇日志乃必读。
期待下期节目!
March 31st, 2009 on 8:58
学习啊学习,喜欢看博主的文章~
March 31st, 2009 on 9:31
style, script { display: block }
我刚从火星归来就看到这个,真有意思~~~
March 31st, 2009 on 9:54
性能影响的话,偶还想八卦一下影响的有多深…人类在当今低档电脑上能否感应到
感谢分享
March 31st, 2009 on 10:05
原来这东西还这么讲究….orz
March 31st, 2009 on 10:41
如果能搞个项目大家一起翻译YUI就好了。。。
天天读英文很累啊~
期待此系列~
March 31st, 2009 on 13:37
持续关注ing…
不过我好像在蓝色理想上看过
淘宝的 Reset css
March 31st, 2009 on 16:08
期待技术篇。。。
March 31st, 2009 on 18:59
看到我的文章作为参考资料,
特来围观,期待佳作上线
March 31st, 2009 on 21:43
好文啊好文
March 31st, 2009 on 23:30
不错啊不错
支持你写一本书 叫大话CSS
April 2nd, 2009 on 15:02
Steve Souders有篇文章讲述CSS性能的。
Performance Impact of CSS Selectors里面还有一些Testing CSS Performance的链接。
April 2nd, 2009 on 16:28
关注
April 2nd, 2009 on 17:39
八卦内容很丰富,看了很愉悦。不错的
加油好吗?
April 4th, 2009 on 21:06
我知道一个 可以直观的看到 “*” 对IE6性能的影响的传说
最早是在米随随博客上看到的
测试环境是IE6
下面这一行代码将导致IE6崩溃:
*{position:relative}
去掉”*”,下面这一行代码在IE6中正常运行:
style,table,input{position:relative}
April 4th, 2009 on 21:12
下面这一行代码将导致IE6崩溃:
print(“*{position:relative}”);
去掉”*”,下面这一行代码在IE6中正常运行:
print(“style,table,input{position:relative}”);
April 22nd, 2009 on 9:31
呵呵
很好 很八卦
May 1st, 2009 on 9:58
雕兄,我想请问一下,你是怎样在众多的公司项目时间之余抽出时间专门研究这个,因为从你每篇文章的参考资料的数目来看,这需要很大的投入。我们alipay的很多同事都反映工作之后,整天被项目缠身,没有时间去深入研究和学习。那么淘宝的同事们,这方面是怎么做到的呢?据我所知你们平时的项目也挺多的
June 8th, 2009 on 14:43
不八卦,无技术,雕兄加油,期待下篇
August 31st, 2009 on 15:30
Eric Meyer、Nate Kokechley、reset.css,还差点小看了reset.css
December 7th, 2009 on 8:25
我真的觉得如果用了不恰当的reset还不如不用,古话说的:适可而止、过犹不及,真的很有道理。基本上我也是Less is more的支持者。
leave a reply