CSS Reset ,你选对了吗?

一直想认认真真写一次关于Reset CSS的文章。

共4种方案。

有兴趣的小伙们,求交流你们用什么来CSS Reset?


*{margin: 0;padding: 0;} —— 被摒弃的方案

学名是Global White Space Reset,据说一开始格外受欢迎,但现在已经被摒弃了。

其实,我一开始接触前端的时候,也是被前辈带得用通用选择器。直到几个月前,才纠正过来。吼吼~希望还在学校的小伙伴们不要沿袭这个坏习惯。

为什么会被摒弃?

原因:

一方面,*导致CSS渲染引擎在渲染CSS的时候,使用*遍历整个DOM 树,影响性能渲染性能。

另一方面,*的威力太大,管你是谁,统统重置,把很多没有必要的都重置了。

那该怎么做?

往下看。


reset.css

最先作者:Eric Meyer

目的:在各个浏览器达到统一的效果。

reset.css链接:http://www.cssreset.com/

玉伯和正淳一起整理的一份 reset.css


Normalize.css

由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库,Bootstrap用的就是normalize.css。

很多人说reset.css太暴力了,normalize.css相对要温柔一些。normalize.css修复了不同浏览器常见的不一致,规范化常见的组件风格,保存有用的默认值。因此,选择用Normalize.css来取代其它的CSS Resets。

截止今日,最新的normalize.css版本是3.0.1。

normalize.css源码链接:http://necolas.github.io/normalize.css/


最适合自己的方案

有时候,我们使用重置时,只是ctrl+C和ctrl+V了事。前两个方案都不是自己写的,也不是专门针对某个项目写的,而是为了解决广大用户的各种问题,但忽略了其中可能有很多我们用不上的重置。

更优的方案就是针对项目再写一个,参考这些方法,做进一步的优化,特别是做大项目的时候。

没有特殊要求下,用reset.css和normalize.css足以。

推荐参考文章:Reset CSS:只选对的,不选”贵”的

麻凯倩

微信:makaiqian