如何优化CSS样式重置

摘要

说到样式重置,不得不提一个符号——星号(*|专业称呼叫“通配符”)。为什么要提到通配符,因为这个符号的作用是巨大的,它代表了HTML里面任意一个标签。也正因为这样,很多人喜欢用通配符做样式重置(如:* {margin: 0; padding: 0;})。

对于网站优化而言,使用通配符的做法是非常不可取的,因为这种做法相当消耗浏览器的性能。原因在于星号代表任意一个标签,当浏览器解析到星号时,就会将页面中所有用到的标签都进行一次样式重置,不管这个标签是否有这样的默认样式。虽然这种性能消耗可以被忽略不计,但是做为一个有责任心的web前端开发人员来说,如无必要,通配符还是避免出现在样式重置中。

对于网页来说,样式是一个网站不可或缺的东西,至少在CSS没有被其它东西取代之前。

接触过网页制作的人都知道,对于HTML标签,不同的浏览器赋予它们的样式是不一样的,为了保证在所有浏览器里都能高精度还原设计效果图,有经验的web前端开发人员一般都会有一套属于自己的样式重置表

说到样式重置,不得不提一个符号——星号(*|专业称呼叫“通配符”)。为什么要提到通配符,因为这个符号的作用是巨大的,它代表了HTML里面任意一个标签。也正因为这样,很多人喜欢用通配符做样式重置(如:* {margin: 0; padding: 0;})。

对于网站优化而言,使用通配符的做法是非常不可取的,因为这种做法相当消耗浏览器的性能。原因在于星号代表任意一个标签,当浏览器解析到星号时,就会将页面中所有用到的标签都进行一次样式重置,不管这个标签是否有这样的默认样式。虽然这种性能消耗可以被忽略不计,但是做为一个有责任心的web前端开发人员来说,如无必要,通配符还是避免出现在样式重置中。

经常看到一些网站,对诸如此类的标签(如:div,span等)进行样式重置,其实这样做是完全没必要的,因为这些标签本身除了标签显示属性外不带有任何默认样式。

那么应该如何做到最优的样式重置呢?只需要记住一个原则,用到什么标签,如果该标签有默认样式且对当前布局或页面展现有影响,那就有必要进行样式重置。

下面,给出笔者常用的样式重置代码

  1. body,
  2. p,
  3. dd,
  4. dl,
  5. form,
  6. h1,
  7. h2,
  8. h3,
  9. h4,
  10. figure,
  11. pre,
  12. form,
  13. select {
  14.   margin: 0;
  15. }
  16. ul,
  17. ol,
  18. th,
  19. td,
  20. input,
  21. textarea {
  22.   margin: 0;
  23.   padding: 0;
  24. }
  25. li {
  26.   list-stylenone;
  27. }
  28. h1,
  29. h2,
  30. h3,
  31. h4,
  32. b,
  33. strong {
  34.   font-weightnormal;
  35. }
  36. i,
  37. em {
  38.   font-stylenormal;
  39. }
  40. a,
  41. s {
  42.   outline: 0 none;
  43.   text-decorationnone;
  44. }
  45. img {
  46.   border: 0 none;
  47.   vertical-aligntop;
  48. }
  49. pre {
  50.   white-spacepre-wrap;
  51.   word-break: break-all;
  52. }
  53. button,
  54. input {
  55.   outline: 0 none;
  56.   border: 0 none;
  57.   border-radius: 0;
  58.   appearance: none;
  59. }
  60. textarea {
  61.   resize: none;
  62.   outline: 0 none;
  63.   overflowauto;
  64. }
  65. table {
  66.   table-layoutfixed;
  67.   word-break: break-all;
  68.   word-wrap: break-word;
  69.   border-collapsecollapse;
  70. }
  71. .fl {
  72.   floatleft;
  73. }
  74. .fr {
  75.   float: right;
  76. }
  77. .clear {
  78.   *zoom: 1;
  79. }
  80. .clear:after {
  81.   content"";
  82.   displayblock;
  83.   clearboth;
  84. }
  85. body,
  86. button,
  87. input,
  88. textarea {
  89.   /* 纠正表单元素字体不按预设渲染,移动端首推Helvetica */
  90.   font-family"Microsoft YaHei"HelveticaArialsans-serif;
  91. }
  92. html,
  93. body {
  94.   /* 解决iOS10+body设置overflow: hidden失效问题 */
  95.   positionrelative;
  96.   width: 100%;
  97.   line-height: 1;
  98.   overflow-x: hidden;
  99.   -webkit-text-size-adjust: none;
  100. }
  101. html * {
  102.   -webkit-tap-highlight-colortransparent;
  103. }

以上样式,可能会随着时间推移进行二次修改,如有不对的地方,希望你给予指正。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: