真的还需要reset.css么?

我博客浏览量靠前的一直是《打造自己的reset.css》,
然而,我对此的观点也已经有所改变,
所以,我觉得是时候写一篇博客阐述一下目前我的理解了。
注意,这是篇激进的博文,其观点并不客观中立,仅仅表示出我目前的想法。

是否使用*{margin:0;padding:0}

实际上,我现在根本不避讳*{margin:0;padding:0}这种写法了。
我从未看到过真正有关于这个对性能有影响的报告
也不觉得下面Eric的重置样式比起这玩意有多高明之处

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

上面的代码波及面一样很大,难道就不造成性能问题了?
到写具体元素样式代码的时候就不会因此受到reset.css的影响了?
扯淡!
现在回过头来看去年3月写的那篇博客《打造自己的reset.css》,
觉得有些想法是人云亦云,有些想法过于幼稚了。
另外找到了一篇博文支持我这种看法,可以看看
关于CSS RESET,关于*{margin:0;padding:0}

其他表现不同的元素

除此padding和margin之外,如果一个元素在不同浏览器内表现显著不同,
那何不直接在用到的那个页面写css呢?
何必为了少数元素的表现,写到全局的reset中呢?
实际上随着IE6的逐渐老去,这种差异已经越来越小了
而我们关心的依然是主流浏览器,IE6,IE7和IE8,这3个是绝对主流,
以及我们自己会用的Firefox和Chrome或者其他
那么只要这几个主流浏览器测试下来没问题,就没问题了,
有必要花成本关心其他更小众的浏览器么?

另外,我们实际中也很少对页面设计需要对任何元素精确到像素级的还原,
只要整体表现得当,个别元素的出格(更多的是跟操作系统有关)无伤大雅。
实际上我就没看到有人非得把表单按钮重置到让mac系统下的样子跟win下一样。

原汁原味的元素

很多元素浏览器默认样式就都一样(至少大致差不离),并且都很不错
比如 ins 和 del 这种,还有 strong 以及 em 这类。
默认样式不好么?如果到头来也不过就是让strong变成粗体,em变成斜体
那还不如不要重置呢。
如果有自己的想法呢,希望全局都一样呢?不如写 global.css 吧!

reset.css VS global.css

是的,很多网站都要追求全局的一些样式的统一,
为此要用reset.css重置一下,然后再用global.css来定义全局样式。
那我说,为何不直接用global.css取代reset.css的功能?
一样要定义,何不一步到位?
先重置,再定义,难道是带宽富余的没处用了?

举例来说,上面提到的 strong 和 em 元素。
如果希望全局都是加粗的斜体的,个别地方有其他样式,那自然无需重置样式
而如果全局都不要加粗斜体,有统一特殊的强调样式,那简单,直接在global.css里写就好了。
如果全局都不要加粗斜体,但不同地方有不同样式,那也简单,
在global.css写入重置样式,都变成正常字体即可,这就是取代了reset.css的功能了。

于是乎,目前我的观点是:reset.css这种先重置再定义的模式可以放弃了,一步到位,根据不同网站的特点编写不同的global.css,效果会更好。
所以,我很支持 No CSS Reset

《真的还需要reset.css么?》上有35条评论

  1. 一直以来就很少用reset.css,感觉用处不是很大,而且它会波及到一些你本不需要修改的属性,还不如在需要的时候有针对性的单独设置。所以支持楼主的观点。

    1. 其实,还是要给每个项目写全局样式的……
      如果不用全局样式的话,*{margin:0;padding:0} 也足够了……

  2. 阿哦,看来我落后了,我现在每次都是global.css,
    global.css的刚开始写入*{margin:0;padding:0},紧接着写所有页面中相同结构框架
    然后每个页面特有的样式在单独一个css
    这样,每个页面最多也就是引入两个css文件…

      1. 正如 @小骆驼商队 说的,好处是可以到处用,存放在 A 站目录下的 reset.css 可以在 B 站引用。如果和 global.css 合体,就不能这样子了。

        1. 其实我文章的观点是,reset.css已经可以只剩下一句
          *{margin:0;padding:0}
          是通用的了,其他的不同网站肯定有自己的global的,
          比如li的设置,比如table的设置,
          把这一句,以及不同网站的li和table的定义放到global.css里来重置就行了,无需单独开一个reset.css了。

  3. 个人觉得reset.css的作用在于团队合作时,能够让大家避免遇到额外的样式影响。除了*{margin:0;padding:0}外,比如table的border-collapse,列表的list-style,大家最常用的其实都不是浏览器的默认样式。
    如果每个global.css中都有li{list-style:none},那这个思路仍然属于reset.css的范畴,并不是说把reset.css的代码放到global.css中,就不再需要CSS Reset。我一直觉得reset.css单独成为一个文件是没有必要的,reset.css和CSS Reset这个概念是两回事儿。
    所以我觉得目前流行的reset.css可以再精简,但并非只一句*{margin:0;padding:0}就足够了。

    1. 说的非常好!就是这个意思!
      这里所说的 CSS Reset 就是一个整站全局性的定义。
      精简reset.css并放入global.css中,针对不同网站来重置。
      现在看起来,最常用的就是这4个了,
      其他元素一般在用到的时候,且浏览器自带样式不合适的时候定义
      除非偏爱某些元素并且需要全局设定,那也可以放在这里,但一般少而精。
      其中table待考,body根据网站特色来决定,我推荐1.5

      *{margin:0;padding:0}
      body {
      line-height: 1.5;
      }
      table {
      border-collapse: collapse;
      border-spacing: 0;
      }
      ol, ul {
      list-style: none;
      }

  4. 怎么就没用了呢?
    reset.css是全站样式。 全部统一
    *{margin:0;padding:0} 不说是好是坏。 主要是做什么样的网站。

    不用reset.cs 肯定是比较好的。减少代码重复

  5. css reset是个非常好的概念,但是楼主说的是写在reset.css或者在global.css里,是指要怎么用css reset,这个其实仁者见仁了,只是楼主的标题可能让很多人误解成了“真的需要css reset吗?”,造成很多误会,呵呵

  6. 装B,不懂CSS本质的就不要在这里装了,看你写的文章就知道你嫩着了,
    *{margin:0;padding:0;}在不同浏览器下,有很多地方都出错的。

    1. 确实,去年那会对这个问题的确考虑欠妥当。
      *{margin:0;padding:0;}的使用确实应当要谨慎一点。当时只针对 *{margin:0;padding:0;}的性能问题来探讨的,现在想来有些片面。固然性能上不成问题,但之后开发上还有其他的麻烦事情。

  7. normalize.css 是个好选择,只解决主流浏览器之间的不一致问题,修正一些 bug,而不是过度 reset,把所有浏览器默认样式都重置。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据