《CSS reset的重新审视 – 避免样式重置》由会员分享，可在线阅读，更多相关《CSS reset的重新审视 – 避免样式重置（6页珍藏版）》请在金锄头文库上搜索。
1、摘要：摘要：最少的 CSS 代码，最少的渲染，最少的重置就是最好的 CSS 样式代码，这反应了 您的 CSS 层次。说句不好听的话，CSS reset 是用来让那些 CSS 菜鸟，对 CSS 不太了 解的人准备的。一、一、CSS reset（CSS 重置）的历史重置）的历史根据淘宝射雕的叙述，最早的一份 CSS reset 来自 Tantek 的 undohtml.css，很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。其余一些有名的 CSS reset 如业界领袖 Eric Meyer 的 reset，或是 Tripoli Reset。CSS reset 的作用
2、是让各个浏览器的 CSS 样式有一个统一的基准，而这个基准更多的就是“清零”！如下面常见但事实上极不推荐的代码：?1* margin:0; padding:0; 可以说，兼容性是 CSS reset 诞生的的主要原因之一，还有一方面的原因是类似于“库”的作用。然而，这些又是我认为 CSS reset 这个概念应该淘汰的原因。二、二、CSS reset 的滥用的滥用物极必反，在集体主义的亚洲国家，从众服从以及跟风是相当常见的，这在 CSS reset 的应用上可见一般，Eric 在其 reset 代码页面中提到：要根据您自己的要求做修改。然而，目前的状态是（尤其一些中小型网站），CSS rese
3、t 代码直接拷贝过去，也不做一番思考，我真是哀其不幸，怒其不争。我今天就见到了这么一行 CSS reset 代码：?1body, 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 这东西的出现以及推崇就是个错误，光看看这段
4、样式代码，我就吐血三升了。我想，有类似这段样式代码的网站不在少数，但是却是很屎的一段 CSS样式代码。1. div 标签默认有 margin 值吗？有 padding 值吗？怎么会想到应用divmargin:0; padding:0;属性呢？真是画蛇添足，多此一举。2. dt 标签有默认的 margin 与 padding 值就是 0，这里为什么还要使用呢？3. li 标签默认有 margin 值吗？有 padding 值吗？压根就没有，也不自己测测，还没事找事设置个 limargin:0; padding:0;属性，真是衰！4. code 标签是个属于 inline 水平的元素，居然也扯到
5、margin 与 padding 的重置，真是好笑。5.还有，像 form, input, button, textarea 这样子的表单元素，有 margin 值吗？有 padding 值吗？我真是不解！6. fieldset, legend 这两个 90 年代的标签你的网站上使用了吗？使用概率不足 1%的标签也拿来重置，我实在无语了。7.还有 th，td 这些标签，幸好没有写上 table 与 tr 标签，否则我一起痛批一段。在我看来，就算要 CSS 默认属性要 reset 重置，也应该如下：?1body, dl, dd, h1, h2, h3, h4, h5, h6, p, formma
6、rgin:0; ol,limargin:0; padding:0;这样子的 CSS reset 才是高效的，简洁的，其他一些标签都要通通的去掉，完全没有必要。三、三、CSS reset 的不足的不足CSS 文件的大小文件的大小显然，CSS reset 平白无故的增加了 CSS 文件的大小，虽然，增加的大小可能有限，但是，要知道，即使 0.1 秒的载入时间差异也会影响互联网企业的收入的。样式的重置样式的重置许多的 CSS 样式要重写与重新覆盖，典型的多此一举。CSS 的渲染的渲染这可以说是最大的问题，样式无缘无故增加了很多的渲染，想想看，一个项目或是一个页面中有多少个 div 标签，居然使用di
7、vmargin:0; padding:0;当然，*margin:0; padding:0;更是无法容忍的。四、四、CSS reset 本没有存在的必要本没有存在的必要当您静下心来，审视你这几年对 CSS 的使用，您再去思考 CSS reset，从它的历史，从它繁盛的原因，去思考 CSS reset 的本质，标签的意义所在，您就会发现，CSS reset这个概念本不应该流行与繁盛，虽然它有道理，但是实际上是个可有可无的东西。我可以从多方面阐述我的观点：1.那些所谓的需要重置的标签那些所谓的需要重置的标签我现在问您一个问题，在您制作的或参与开发的页面中，h1h6 标签您使用了几个，我想不可能全部都
8、使用吧，使用三种类型的标题标签就不多了。您有必要对 h1h6 所有标签都使用 margin 的清除吗？ OK，我们现在换个角度思考，假如我们没有对 h1h6标签设置margin:0;的重置怎么办？从 SEO 的角度讲，一个页面最多只能出现一个 h1标签，所以，显然，h1 标签的 CSS reset 完全没有必要，页面什么地方用就设置相应的样式，只要你记住，h1 标签是有个默认的 margin-top 与 margin-bottom 值的，所以，我们就可以由这样的属性：?1h1margin:10px 0 0;对比下 CSS reset 下的使用：?1 2 3 4 5h1, h2, h3, h4,
9、 h5, h6margin:0; . . . h1margin-top:10px;使用 CSS reset 不仅文件大小增加了，CSS 代码属性也发生了重置，CSS 渲染也增加了。显然不及没有 CSS reset 来的高效。您可能会说：“哎呀，小旭啊！你这里的 h1 标签是个特殊情况啊，是只出现一次的标签啊。反驳地好，我们拿 h4 标签举例说明 CSS reset 是个多余的东西。一个页面上往往有很多个模块，没有模块都有一个小小的标签，而这个标题往往就使用 h3 或是 h4 标签，例如腾讯首页的模块选项卡标题，如下图：我们看看腾讯页面时如何对这个 h4 标签设置样式的，见下图：上图标注部分，有
10、个 margin 属性，现在对比下面两种样式设置：腾讯做法：?1 2 3 4 5 6 7 8 9 10 11 12h1, h2, h3, h4, h5, h6margin: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:73
11、px; 我的做法：?1 2 3 4 5 6 7 8 9 10 11#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 标
12、签。就算这里的 h4 标签没有 margin 值，我们可以直接设置 margin:0;就好了，没有任何的损失。CSS reset 就是个可有可无，没有最好的东西。同样的原理也可以应用在 ul,ol 标签上，你说你使用 ul 列表进行列表元素的布局的时候，不会设置 margin 值与 padding 值吗？既然可能要设置这些属性，为何不在就在要使用它们的时候设置呢？没有什么损失啊，反而可以避免不必要的渲染。CSS reset 就像是一种宁可错杀三千不可放过一个的做法。2.那些所谓的兼容性那些所谓的兼容性所谓兼容性，我想，大多数人都是听别人说的，不同浏览器下标签的一些属性有差异啊！我倒要问一问，哪
13、些标签的默认属性在不同浏览器下有差异？您可以花点时间想想。/zxx:假设您经过了短暂的思考我所知道的就是 h1 标签的文字的大小，在有些浏览器下大些，有些小些；然后就是一些 margin 值的些许偏差，然后还有呢？事实上，目前浏览器而言，对于这些默认标签的属性其实差异是很少很小的，兼容性一说实在不能用在标签的默认属性上。回过来，就算有一些差异，为何非得在头部已 CSS reset 的位置同一呢？当需要的时候，在设置，又有什么差异呢，这样，反而更直接，更高效！3. CSS 库的概念库的概念我认为，CSS reset 是个非常尴尬的概念，这是与性能，优化的概念是相悖的，但是，实际上，有时候它的存在
14、似乎有一定的道理的，比如设置默认的 a 标签的属性。不过，我们也可以不用 CSS reset 的概念来解释它。如下面的代码：?1 2bodymargin:0; font:normal 12px/1.5 宋体; acolor:#34538b;这样子的代码您想到了 CSS reset 吗？再看下面的代码：?1 2 3 4 5 6 7 8 9 10 11 12bodymargin:0; font:normal 12px/1.5 宋体; acolor:#34538b; .lfloat:left; .rfloat:right; .clclear:both; imgborder:0; .tctext-al
15、ign:center; .trtext-align:right; .tltext-align:left; .g0color:#000; .g3color:#333; .g6color:#666;13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35.g9color:#999; .r3color:#f30; .wfcolor:#fff; .vmvertical-align:middle; .vtbvertical-align:text-bottom; .vtvertical-align:top; .vnvertic
16、al-align:-2px; .ml2margin-left:2px; .ml5margin-left:5px; .ml10margin-left:10px; .ml20margin-left:20px; .mr2margin-right:2px; .mr5margin-right:5px; .mr10margin-right:10px; .mr20margin-right:20px; .mt2margin-top:2px; .mt5margin-top:5px; .mt10margin-top:10px; .mt20margin-top:20px; .mb2margin-bottom:2px; .mb5margin-bottom:5px; .mb10margin-bottom:10px; .mb20margin-bottom:20px;这样子
