顾名思义，css重构就是重设浏览器的表现样式。为什么要重构呢？因为浏览器样式在不同的浏览器渲染下的默认显示各有不同，为了我们在开发中能够让项目在所有浏览器下的显示效果是一样的，所以在开发之前我们要按照自己习惯的方式来重构CSS代码。
那么我们需要怎样的习惯呢？这个还是要靠自己在项目中积累了。以前我在初学时也是复制别人的CSS Reset代码，然后再进行自己的项目，可是有的时候我发现有些没必要重构的样式在之前重构掉了，在单独到一个样式定义时，我还需要给他重新写上，而且，在不同的项目下的重构样式也会各不相同，例如一个图片网站和一个博客网站。因此，我往往都是简单的重构一些必须的样式，后期用到需要重构的额外再写，因此我的习惯就是随用随加。
今天在博客园里看到了一篇文章中的十个重构的例子。接下来就是剽窃的内容了：
一、Generic Reset CSS
* { padding: 0; margin: 0; border: 0; }
这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。
二、Ateneu Popular CSS Reset
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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0;} a, a:link, a:visited, a:hover, a:active{text-decoration:none} table { border-collapse: separate;border-spacing: 0;} th, td {text-align: left; font-weight: normal;} img, iframe {border: none; text-decoration:none;} ol, ul {list-style: none;} input, textarea, select, button {font-size: 100%;font-family: inherit;} select {margin: inherit;} hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}
三、Chris Poteet’s Reset CSS
* { vertical-align: baseline; font-family: inherit; font-style: inherit; font-size: 100%; border: none; padding: 0; margin: 0; } body { padding: 5px; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl { margin: 20px 0; } li, dd, blockquote { margin-left: 40px; } table { border-collapse: collapse; border-spacing: 0; }
四、Yahoo’s CSS Reset
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset,img { border: 0; } address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; } ol,ul { list-style: none; } caption,th { text-align: left; } h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } q:before,q:after { content:”; } abbr,acronym { border: 0; }
五、Eric Meyer Reset CSS
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, dl, dt, dd, ol, ul, li, fieldset, form, label, legend { vertical-align: baseline; font-family: inherit; font-weight: inherit; font-style: inherit; font-size: 100%; outline: 0; padding: 0; margin: 0; border: 0; } :focus { outline: 0; } body { background: white; line-height: 1; color: black; } ol, ul { list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { font-weight: normal; text-align: left; } blockquote:before, blockquote:after, q:before, q:after { content: “”; } blockquote, q { quotes: “” “”; }
六、Tantek Celik Reset CSS
:link,:visited { text-decoration:none } ul,ol { list-style:none } h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; } ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input { margin:0; padding:0 } a img,:link img,:visited img { border:none } address { font-style:normal }
七、Christian Montoya Reset CSS
html, body, form, fieldset { margin: 0; padding: 0; font: 100%/120% Verdana, Arial, Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; } li, dd, blockquote { margin-left: 1em; } form label { cursor: pointer; } fieldset { border: none; } input, select, textarea { font-size: 100%; font-family: inherit; }
八、Rudeworks Reset CSS
* { margin: 0; padding: 0; border: none; } html { font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif; text-shadow: #000 0px 0px 0px; } ul { list-style: none; list-style-type: none; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { font-weight: normal; margin: 0 0 1em 0; } cite, em, dfn { font-style: italic; } sup { position: relative; bottom: 0.3em; vertical-align: baseline; } sub { position: relative; bottom: -0.2em; vertical-align: baseline; } li, dd, blockquote { margin-left: 1em; } code, kbd, samp, pre, tt, var, input[type='text'], textarea { font-size: 100%; font-family: monaco, “Lucida Console”, courier, mono-space; } del { text-decoration: line-through; } ins, dfn { border-bottom: 1px solid #ccc; } small, sup, sub { font-size: 85%; } abbr, acronym { text-transform: uppercase; font-size: 85%; letter-spacing: .1em; border-bottom-style: dotted; border-bottom-width: 1px; } a abbr, a acronym { border: none; } sup { vertical-align: super; } sub { vertical-align: sub; } h1 { font-size: 2em; } h2 { font-size: 1.8em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } h6 { font-size: 1em; } a, a:link, a:visited, a:hover, a:active { outline: 0; text-decoration: none; } a img { border: none; text-decoration: none; } img { border: none; text-decoration: none; } label, button { cursor: pointer; } input:focus, select:focus, textarea:focus { background-color: #FFF; } fieldset { border: none; } .clear { clear: both; } .float-left { float: left; } .float-right { float: right; } body { text-align: center; } #wrapper { margin: 0 auto; text-align: left; }
九、Anieto2K Reset CSS
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, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; vertical-align: baseline } body { line-height: 1 } :focus { outline: 0 } ol, ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } blockquote:before, blockquote:after, q:before, q:after { content: “” } blockquote, q { quotes: “” “” } input, textarea { margin: 0; padding: 0 } hr { margin: 0; padding: 0; border: 0; color: #000; background-color: #000; height: 1px }
十、CSSLab CSS Reset
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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } :focus { outline: 0; } table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } a img, iframe { border: none; } ol, ul { list-style: none; } input, textarea, select, button { font-size: 100%; font-family: inherit; } select { margin: inherit; } /* Fixes incorrect placement of numbers in ol’s in IE6/7 */ ol { margin-left:2em; } /* == clearfix == */ .clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} * html .clearfix {height: 1%;} .clearfix {display: block;}
以上方法大同小异，需求不同因而方法不同，一个好的重构代码是即能达到自己想使用的效果，又能提高自己的效率，更能节省不必要浪费的资源，还可以节省不必要浪费的代码，这才是重构最终要实现的目的。
部分代码转自：博客园 – 基于B/S模式的设计与开发
留言