一直想认认真真写一次关于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:只选对的,不选”贵”的