我博客浏览量靠前的一直是《打造自己的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,感觉用处不是很大,而且它会波及到一些你本不需要修改的属性,还不如在需要的时候有针对性的单独设置。所以支持楼主的观点。
reset.css有个好处是可以一次写到处用~
其实,还是要给每个项目写全局样式的……
如果不用全局样式的话,*{margin:0;padding:0} 也足够了……
阿哦,看来我落后了,我现在每次都是global.css,
global.css的刚开始写入*{margin:0;padding:0},紧接着写所有页面中相同结构框架
然后每个页面特有的样式在单独一个css
这样,每个页面最多也就是引入两个css文件…
你这哪是落后啊,不是跟我的观点一样嘛。
怎么方便怎么写啊,reset.css感觉挺好的,不用老是一些属性敲了又敲!~
您肯定没看到底,我提出的建议是精简reset.css,并融入global.css。
正如 @小骆驼商队 说的,好处是可以到处用,存放在 A 站目录下的 reset.css 可以在 B 站引用。如果和 global.css 合体,就不能这样子了。
其实我文章的观点是,reset.css已经可以只剩下一句
*{margin:0;padding:0}
是通用的了,其他的不同网站肯定有自己的global的,
比如li的设置,比如table的设置,
把这一句,以及不同网站的li和table的定义放到global.css里来重置就行了,无需单独开一个reset.css了。
Pingback: CSS3中动画效果的应用 | 走走停停看看
个人觉得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}就足够了。
说的非常好!就是这个意思!
这里所说的 CSS Reset 就是一个整站全局性的定义。
精简reset.css并放入global.css中,针对不同网站来重置。
现在看起来,最常用的就是这4个了,
其他元素一般在用到的时候,且浏览器自带样式不合适的时候定义
除非偏爱某些元素并且需要全局设定,那也可以放在这里,但一般少而精。
其中table待考,body根据网站特色来决定,我推荐1.5
Pingback: 打造自己的reset.css | 走走停停看看
這文章怎麼跟我的想法一模一樣呢?支持 XD
Pingback: Think In LAMP Blog » Blog Archive » PHP每月通讯(2010年10月)
这几天就要重写整个主题,到时候试试 不要css reset,看看css会不会小些。
怎么就没用了呢?
reset.css是全站样式。 全部统一
*{margin:0;padding:0} 不说是好是坏。 主要是做什么样的网站。
不用reset.cs 肯定是比较好的。减少代码重复
您没看懂我的原文呢。我的观点是:直接用global.css取代reset.css的功能。
Pingback: 关于reset,你知道的都是错的 « 重构模式
Pingback: Weekly Articles [1] | 箭及
CSS我还比较菜~~多拜读大牛们的文章·~好处总是多多~
css reset是个非常好的概念,但是楼主说的是写在reset.css或者在global.css里,是指要怎么用css reset,这个其实仁者见仁了,只是楼主的标题可能让很多人误解成了“真的需要css reset吗?”,造成很多误会,呵呵
拿 reset.css 修改一下
就是个完美的 global.css
专门去做CSS Reset再在其上覆盖参数本来就是很疼的事情…不过博主的文章真很难阅读呢
装B,不懂CSS本质的就不要在这里装了,看你写的文章就知道你嫩着了,
*{margin:0;padding:0;}在不同浏览器下,有很多地方都出错的。
确实,去年那会对这个问题的确考虑欠妥当。
*{margin:0;padding:0;}的使用确实应当要谨慎一点。当时只针对 *{margin:0;padding:0;}的性能问题来探讨的,现在想来有些片面。固然性能上不成问题,但之后开发上还有其他的麻烦事情。
“麻烦事情“?可否举个例子。
同问