CSS Reset方法及它的滥用

Reset是什么？点击Reset后，有些东西没有被重置的原因？

（1）CSS Reset

通常情况下，它也被写成Reset CSS，即重设浏览器的样式。在各种浏览器中，都会对CSS的选择器默认一些数值，譬如当h1没有被设置数值时，显示一定大小。但并不是所有的浏览器都使用一样的数值，所以，有了CSS Reset，以让网页的样式在各浏览器表现一致。

比如：

*｛padding:0; margin:0; border:0｝

//这是一款CSS Reset的方法，让所有的选择器的padding,margin和border都设置为0。这是一种强大的方法，也是最简单，最安全的方法。不过，也是占用资源最少的方法。对于小的网站来说，用这并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。

 

//（1）以下是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{

padding:0;

margin:0;

}

table{

border-collapse:collapse;

border-spacing:0;

}

fieldset,img{

border:0;

}

address,caption,cite,code,dfn,em,strong,th,var{

font-weight:normal;

font-style:normal;

}

ol,ul{

list-style:none;

}

caption,th{

text-align:left;

}

h1,h2,h3,h4,h5,h6{

font-weight:normal;

font-size:100%;

}

q:before,q:after{

content:’’;

}

abbr,acronym{

border:0;

}

//（2）国外名人Eric Meyer的CSS Reset V1.0|200802内容：

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before,blockquote:after, q:before, q:after { content: ''; content: none; } /* remember to define focus styles! */ :focus { outline: 0;} /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; }

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6,p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output,ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}

 

 

注意问题：

CSS 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 reset的不足

CSS文件的大小：

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

样式的重置：

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

CSS的渲染

这可以说是最大的问题，样式无缘无故增加了很多的渲染，想想看，一个项目或是一个页面中有多少个div标签，居然使用div{margin:0; padding:0;}当然，*{margin:0; padding:0;}更是无法容忍的。

 

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

1. 那些所谓的需要重置的标签

我现在问您一个问题，在您制作的或参与开发的页面中，h1~h6标签您使用了几个，我想不可能全部都使用吧，使用三种类型的标题标签就不多了。您有必要对h1~h6所有标签都使用margin的清除吗？ OK，我们现在换个角度思考，假如我们没有对h1~h6标签设置{margin:0;}的重置怎么办？从SEO的角度讲，一个页面最多只能出现一个h1标签，所以，显然，h1标签的CSS reset完全没有必要，页面什么地方用就设置相应的样式，只要你记住，h1标签是有个默认的margin-top与margin-bottom值的，所以，我们就可以由这样的属性：

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来的高效。

我们看看腾讯页面时如何对这个h4标签设置样式的，见下图：

上图标注部分，有个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;}

通过对比可以发现，我的做法避免了右侧margin值的重置，而且也节省了可能不会使用的h5,h6标签。就算这里的h4标签没有margin值，我们可以直接设置margin:0;就好了，没有任何的损失。CSS reset就是个可有可无，没有最好的东西。

同样的原理也可以应用在ul,ol标签上，你说你使用ul列表进行列表元素的布局的时候，不会设置margin值与padding值吗？既然可能要设置这些属性，为何不在就在要使用它们的时候设置呢？没有什么损失啊，反而可以避免不必要的渲染。
CSS reset就像是一种宁可错杀三千不可放过一个的做法。

2. 那些所谓的兼容性
所谓兼容性，我想，大多数人都是听别人说的，不同浏览器下标签的一些属性有差异啊！我倒要问一问，哪些标签的默认属性在不同浏览器下有差异？您可以花点时间想想。//zxx:假设您经过了短暂的思考
我所知道的就是h1标签的文字的大小，在有些浏览器下大些，有些小些；然后就是一些margin值的些许偏差，然后还有呢？事实上，目前浏览器而言，对于这些默认标签的属性其实差异是很少很小的，兼容性一说实在不能用在标签的默认属性上。

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

3. CSS库的概念
我认为，CSS reset是个非常尴尬的概念，这是与性能，优化的概念是相悖的，但是，实际上，有时候它的存在似乎有一定的道理的，比如设置默认的a标签的属性。不过，我们也可以不用CSS reset的概念来解释它。如下面的代码：

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;}……

这样子您想到了CSS reset了吗？看这里的a标签属性以及img属性，我们发现我们可以用CSS库的概念来解释类似于a标签属性设置的原因，这样就可以避免CSS reset解释的一些尴尬。其实想想，本来就是，这些属性与.l{float:left;}.r{float:right;}库样式作用是一致的，方便高效的使用。对于CSS库的概念，我的思考还不是很成熟，就提这么多。

 

五、少即是多

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