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

目录
相关文章
|
前端开发
CSS Reset或Normalize.css
CSS Reset或Normalize.css
|
Web App开发 移动开发 前端开发
|
Web App开发 前端开发 搜索推荐
CSS Reset & Modern CSS Reset
CSS Reset & Modern CSS Reset
475 1
CSS Reset & Modern CSS Reset
|
前端开发
现代浏览器样式重置CSS Reset 方案汇总整理
现代浏览器样式重置CSS Reset 方案汇总整理
239 0
现代浏览器样式重置CSS Reset 方案汇总整理
|
Web App开发 前端开发 UED
现代 CSS 解决方案:Modern CSS Reset
现代 CSS 解决方案:Modern CSS Reset
453 0
现代 CSS 解决方案:Modern CSS Reset
|
前端开发
Normalize.css:CSS reset的替代方案
Normalize.css:CSS reset的替代方案
272 0
|
前端开发
重置浏览器样式CSS Tools: Reset CSS
重置浏览器样式CSS Tools: Reset CSS
323 0
|
前端开发 BI 移动开发
移动端reset.css
说明 移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.
2165 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.
1119 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    450
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    350
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    335
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    226
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    449
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    623
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    928
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    238
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    763
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    419