Reset CSS:只选对的,不选"贵"的 (转载)

    xiaoxiao2021-03-25  94

    先耐人深思,令人回味下:

    1 .你知道Reset CSS是什么东东吗? 2 .  * { margin: 0; padding: 0; } 你还在用吗? 3 . 你打造了自己的Reset CSS 吗? 4 .打造过程中你使用了Ctrl + C和Ctrl + V吗?

    关于Reset CSS的类似问题还有很多,Reset.css极其简单又极其复杂,本文之所以叫做<<Reset CSS:只选对的,不选"贵"的>>,原因是这样的:首先Reset CSS你要找寻适合自己的,适合项目的,这就是只选对的,不选"贵"的,"贵"这里指的是代码的冗余所造成的不必要的浪费。

    回答

    我先回答一下上面的四个问题,进而本文逐渐展开。

    1.Reset CSS 是什么东西,想必做前端的人都应该知道的,这里不在多说

    2.* { margin: 0; padding: 0 }的学名是Global White Space Reset. 从原文中可以看出这个方法刚问世时是非常火爆的,并且作者建议一定要先破后立,要将清扫差异和重置默认样式结合起来,这样才是正确的做法。为何这个方法在问世之初风光一时,而后又被大家摒弃?其实它的长处和短处都过于明显,* { margin: 0; padding: 0 } 对于style的处理机制是管你谁是谁,上去一顿降龙十八掌,打完再说,先破再利,却不知这样做带来了麻烦无限(因为被抹平的样式,你得再重新设置回来,比如input的padding等),一个缺点和有点同样明显的东东,我们还是不用为妙。

    作者注:“*” 导致CSS渲染引擎在渲染CSS的时候,使用*遍历整个DOM 树,影响性能渲染性能。(直到发表本文的时候,还是没找到相关资料,如果知道请留言给我)

    3.针对第三个问题,你的回答我想应该是“是的”,但是如果你考虑到本文标题,估计就会说的有些心虚了。为什么心虚呢?请往下看......

    4.心虚的原因是打造过程中使用了Ctrl+c和Ctrl+v,这说明你的Reset CSS 是从那个站点或者个人BLOG或者网页源文件里拷贝来的,原封不动,直接用在项目中去了。

    中国互联网很好的继承了中华民族的优良传统,你抄我的,我抄你的,抄来抄去,各种Reset CSS 长的都差不多,抄的过程中,努力去做到求实求证,努力求一份自己的理解,很难很难。但只要孜孜不倦,终究会有所获,有所得,有所悟。

     Reset CSS相关文章:

                     《打造自己的reset css》    《reset css研究(八卦篇)》   《reset css研究(技术篇)》

     

      玉伯和正淳一起整理的一份 reset.css:    

     

    /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com) */ /*  清除内外边距  */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,  /*  structural elements 结构元素  */ dl, dt, dd, ul, ol, li,  /*  list elements 列表元素  */ pre,  /*  text formatting elements 文本格式元素  */ fieldset, lengend, button, input, textarea,  /*  form elements 表单元素  */ th, td  {   /*  table elements 表格元素  */     margin :  0 ;     padding :  0 ; } /*  设置默认字体  */ body, button, input, select, textarea  {   /*  for ie  */      /* font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif; */     font :  12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif ;   /*  用 ascii 字符表示,使得在任何编码下都无问题  */ } h1  {  font-size :  18px ;   /*  18px / 12px = 1.5  */   } h2  {  font-size :  16px ;   } h3  {  font-size :  14px ;   } h4, h5, h6  {  font-size :  100% ;   } address, cite, dfn, em, var  {  font-style :  normal ;   }   /*  将斜体扶正  */ code, kbd, pre, samp, tt  {  font-family :  "Courier New", Courier, monospace ;   }   /*  统一等宽字体  */ small  {  font-size :  12px ;   }   /*  小于 12px 的中文很难阅读,让 small 正常化  */ /*  重置列表元素  */ ul, ol  {  list-style :  none ;   } /*  重置文本格式元素  */ a  {  text-decoration :  none ;   } a:hover  {  text-decoration :  underline ;   } abbr[title], acronym[title]  {   /*  注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果  */     border-bottom :  1px dotted ;     cursor :  help ; } q:before, q:after  {  content :  '' ;   } /*  重置表单元素  */ legend  {  color :  #000 ;   }   /*  for ie6  */ fieldset, img  {  border :  none ;   }   /*  img 搭车:让链接里的 img 无边框  */ /*  注:optgroup 无法扶正  */ button, input, select, textarea  {     font-size :  100% ;   /*  使得表单元素在 ie 下能继承字体大小  */ } /*  重置表格元素  */ table  {     border-collapse :  collapse ;     border-spacing :  0 ; } /*  重置 hr  */ hr  {     border :  none ;     height :  1px ; } /*  让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁  */ html  {  overflow-y :  scroll ;   }

       测试过的浏览器:IE 6+, Firefox 3.5+, Safari 4+, Chrome 2+, Opera 10+       

     解释一些和 YUI cssreset 的差异点:

     

     

    1  清除内外边距的元素,去掉了 div, code(在测试浏览器中,没发现有边距), 增加了 button(感觉是 YUI 遗漏了).  2  去掉了 YUI 里对 html 颜色和背景色的设置。在测试浏览器中,没有发现差异。(要设的话,推荐background: transparent)  3  对于 address, caption, …, em, strong 等文本格式元素,做了调整。保留了 strong 和 th 的粗体。  4  对 abbr 和 acronym 做了调整,使得在非 ie6 下可视性更好。  5  去掉了 sup 和 sub 的样式,直接用浏览器默认的即可。  6  对于 input, select, textarea 表单元素,去掉了针对 ie 的 inherit, 只保留了 font - size 的 inherit hack. 因为其它 hack 经测试已失效。  7  增加了一些元素的默认样式。 

    此外,对整体代码的组织形式做了调整,按照元素的类别将代码进行了分组

    如何使用

    请记住:永远不存在万能解决方案,永远没有银弹。

    因此我的建议和 Eric 是一样的:请根据具体需求,适量裁剪和修改后再使用。

    比如针对淘宝,可以在 reset.css 的基础上,修改为 reset-taobao.css.

    如果是个人博客,我个人喜欢的一个方案是:reset-blog.css.

    相关测试页面请查看:cssreset svn. 真实使用时,请用压缩后的版本:reset-min.css.

    对于 reset.css 本身,我们期待它能尽量多的适用于各种场景,但不期待它能解决所有问题。目前而言,reset.css 里的默认样式,是玉伯和正淳等各位同事和朋友们实践经验的总结,算是“精挑细选”,但不期待能解决所有问题。

    最后,期待你的参与和建议。如果这份 reset.css 能有幸在你的项目中得到使用,则非常期待你的反馈。

    作者建议:

    1.真是项目中可以这样:Reset css +fonts.css /base.css/layout.css.......相结合的方式

    2.在reset css中 没用到的元素可以直接拿掉,减少代码量

    3.在reset css中做好版本维护信息,方便扩展

    最后建议:

    网上所有的Reset css 都不是你自己的Reset css ,包括玉伯整理的这个,使用前请深思本文开头的话,量身打造,只选对的,不选"贵"的。

    来源:http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html

    转载请注明原文地址: https://ju.6miu.com/read-20292.html

    最新回复(0)