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:只选对的,不选”贵”的

目录
相关文章
|
3月前
|
前端开发
CSS Reset或Normalize.css
CSS Reset或Normalize.css
|
Web App开发 前端开发 搜索推荐
CSS Reset & Modern CSS Reset
CSS Reset & Modern CSS Reset
227 1
CSS Reset & Modern CSS Reset
|
前端开发
现代浏览器样式重置CSS Reset 方案汇总整理
现代浏览器样式重置CSS Reset 方案汇总整理
119 0
现代浏览器样式重置CSS Reset 方案汇总整理
|
Web App开发 移动开发 前端开发
|
Web App开发 前端开发 UED
现代 CSS 解决方案:Modern CSS Reset
现代 CSS 解决方案:Modern CSS Reset
259 0
现代 CSS 解决方案:Modern CSS Reset
|
前端开发
Normalize.css:CSS reset的替代方案
Normalize.css:CSS reset的替代方案
145 0
|
前端开发
重置浏览器样式CSS Tools: Reset CSS
重置浏览器样式CSS Tools: Reset CSS
137 0
|
前端开发 BI 移动开发
移动端reset.css
说明 移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.
1949 0
|
前端开发
css - 移动端reset汇总与注释
1.解决移动端触摸a元素,会有蓝色阴影 正常状态:         点击时状态:   a{ outline:none; -webkit-tap-highlight-color: rgba(0,0,0,0); } -webkit-tap-highlight-color: rgba(0,0,0,0);可以将该阴影透明化   2.
1005 0