CSS reset的重新审视 – 避免样式重置

CSS reset的重新审视 – 避免样式重置

  一、CSS reset(CSS重置)的历史

  根据淘宝射雕的叙述,最早的一份CSS reset来自Tantek 的undohtml.css,很简单的代码,Tantek 根据自己的需要,对浏览器的默认样式进行了一些重置。

  其余一些有名的CSS reset如业界领袖Eric Meyer的reset,或是Tripoli Reset。

  CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准,而这个基准更多的就是“清零”!如下面常见但事实上极不推荐的代码:

*{ margin:0; padding:0; }

  可以说,兼容性是CSS reset诞生的的主要原因之一,还有一方面的原因是类似于“库”的作用。然而,这些又是我认为CSS reset这个概念应该淘汰的原因。

  二、CSS reset的滥用

  物极必反,在集体主义的亚洲国家,从众服从以及跟风是相当常见的,这在CSS reset的应用上可见一般,Eric在其reset代码页面中提到:要根据您自己的要求做修改。然而,目前的状态是(尤其一些中小型网站),CSS reset代码直接拷贝过去,也不做一番思考,我真是哀其不幸,怒其不争。我今天就见到了这么一行CSS reset代码:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0;padding: 0; }

  看到这样子的CSS代码我只能无奈的摇摇头,浮躁的不严谨这些词立马涌现在我脑中。姑且先不说CSS reset这东西的出现以及推崇就是个错误,光看看这段样式代码,我就吐血三升了。我想,有类似这段样式代码的网站不在少数,但是却是很屎的一段CSS样式代码。

  5.还有,像form, input, button, textarea这样子的表单元素,有margin值吗?有padding值吗?我真是不解!

  在我看来,就算要CSS默认属性要reset重置,也应该如下:

body, dl, dd, h1, h2, h3, h4, h5, h6, p, form{margin:0;}   ol,li{margin:0; padding:0;}

  三、CSS reset的不足

  CSS文件的大小
  显然,CSS reset平白无故的增加了CSS文件的大小,虽然,增加的大小可能有限,但是,要知道,即使0.1秒的载入时间差异也会影响互联网企业的收入的。

  样式的重置
  许多的CSS样式要重写与重新覆盖,典型的多此一举。

  CSS的渲染
div{margin:0; padding:0;}当然,*{margin:0; padding:0;}更是无法容忍的。

  四、CSS reset本没有存在的必要

  我可以从多方面阐述我的观点:

h1{margin:10px 0 0;}

  对比下CSS reset下的使用:

h1, h2, h3, h4, h5, h6{margin:0;}
.
.
.
h1{margin-top:10px;}

  使用CSS reset不仅文件大小增加了,CSS代码属性也发生了重置,CSS渲染也增加了。显然不及没有CSS reset来的高效。

  上图标注部分,有个margin属性,现在对比下面两种样式设置:

  腾讯做法:

h1, h2, h3, h4, h5, h6{margin:0;}
#finance h4, #car h4, #tech h4, #edu h4, #kid h4, #astro h4, #sports h4 {
float:left;
font-weight:200;
height:20px;
line-height:20px;
margin-right:1px;
overflow:hidden;
padding-top:3px;
text-align:center;
width:73px;
}

  我的做法:

#finance h4, #car h4, #tech h4, #edu h4, #kid h4, #astro h4, #sports h4 {
float:left;
font-weight:200;
height:20px;
line-height:20px;
margin:0 0 0 1px;
overflow:hidden;
padding-top:3px;
text-align:center;
width:73px;
}

CSS reset就像是一种宁可错杀三千不可放过一个的做法。

  2.那些所谓的兼容性
//zxx:假设您经过了短暂的思考

  回过来,就算有一些差异,为何非得在头部已CSS reset的位置同一呢?当需要的时候,在设置,又有什么差异呢,这样,反而更直接,更高效!

  3. CSS库的概念

body{margin:0; font:normal 12px/1.5 '宋体';}
a{color:#34538b;}

  这样子的代码您想到了CSS reset吗?

  再看下面的代码:

body{margin:0; font:normal 12px/1.5 '宋体';}
a{color:#34538b;}
.l{float:left;}
.r{float:right;}
.cl{clear:both;}
img{border:0;}
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.r3{color:#f30;}
.wf{color:#fff;}
.vm{vertical-align:middle;}
.vtb{vertical-align:text-bottom;}
.vt{vertical-align:top;}
.vn{vertical-align:-2px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml20{margin-left:20px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr20{margin-right:20px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}……

.l{float:left;}.r{float:right;}库样式作用是一致的,方便高效的使用。对于CSS库的概念,我的思考还不是很成熟,就提这么多。

  五、少即是多

  武侠的最高境界是什么?–无招胜有招
  设计的最高境界是什么?–减少设计
  所以,最少的CSS代码,最少的渲染,最少的重置就是最好的CSS样式代码,这反应了您的CSS层次。说句不好听的话,CSS reset是用来让那些CSS菜鸟,对CSS不太了解的人准备的。

CSS reset的重新审视 – 避免样式重置

相关文章:

你感兴趣的文章:

标签云: