CSS Reset

在写这篇文章之前,使用*{padding:0;margin:0}已经给我的实际项目的使用带来了麻烦:所有的元素通杀掉了,想要一些基本的边距都得依靠后期去编写重建,实在是有点偷鸡不成蚀把米的意思.至于使用*会带来效率问题,是如何测试的?

什么是CSS Reset

顾名思义,Reset即为”重置”的意思,CSS Reset就是要重置CSS样式.但是,CSS Reset绝不仅仅是为了清除html元素默认表现,而是为了更好的统一各种浏览器下面的表现从而使得我们避开各种浏览器BUG所带来的问题,所以,”重置”这个词很恰当.需要注意的是:Reset不是万能的!随着时间的流逝和技术的进步,Reset也应相应的变化.

Reset CSS能够达到使浏览器”统一”表现的作用.对于比较大点的项目,好处更加的明显.然而,CSS reset却并没有一个”一统江湖”的唯一标准.个人认为,CSS reset应该根据各种项目和不同需求去定制一套”最适合”的,因为并不是所有的html元素都会在一个项目里面出现.

使用哪种CSS Reset

目前有三个CSS Reset方案可供我们使用:

• KISSY CSS Reset 1.0
• YUI 3 CSS Reset
• Eric CSS Reset

对于这三套方案,我更倾向于射雕的KISSY CSS Reset,原因是:更适合中国国情.当然,这三套方案都不是适合于你直接使用的,因为没有最好,只有最适合.你需要根据你的需要进行添加,修改或者删除.这里有一些延伸阅读可以帮助你进行接下来的工作:

• 打造自己的reset.css
• Dawn CSS Reset

展望未来的 HTML5 CSS Reset

html5是个不那么新鲜的事物了,大家纷纷去”体验”超前的技术.然而,html5要真正的铺开来,还有待时日.但是国外的同学总是那么的”超前”于我们,这不,对于html5的CSS Reset已经出来了:

/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted #000;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

对于其的讨论实在激烈,英文好的可以看这里:html5doctor,我认为,其目前只适用于尝鲜使用,毕竟,我们还在IE6呢.

针对移动设备的 Mobile CSS Reset

/* CSS Mobile Reset */
html, body
{
 margin: 0;
 padding: 0;
 border: 0;
}

body
{
 font-family:Arial,  sans-serif;
 line-height:1.5;
 font-size:16px;
 background: #fff;
 padding:5px;
 color: #000;
 word-wrap: break-word;
 -webkit-text-size-adjust: none;
}

h1, h2, h3, h4, h5, h6{ font-weight: normal; }

p img { float: left; margin: 0 10px 5px 0; padding: 0; }

img { border: 0; max-width: 100%; }

table { width:auto; border-collapse: collapse;border-spacing: 0; }

参考:http://www.vcarrer.com/2010/11/css-mobile-reset.html

附上个便于理解的slider:

对CSS Reset的质疑

任何事物有支持,那么必然也会有反对的,CSS Reset同意如此;这就像矛与盾,从哪个方面看都是正确的,只是,我们中国来说,项目需求普遍是阿里系的容貌,所以,不得不去”快速开发”.而NO CSS Reset,需要的是非常扎实的基础与相当丰富的经验.参考:No CSS Reset.