最近准备写一个符合自己习惯的css框架，首先第一步当然是reset.css

研究了一些网上的资料，整合了一下，以YUI为蓝本，整理出了最符合自己的reset.css。

参考资料有

1、玉伯同学的Reset CSS研究（八卦篇）

2、蓝色理想上的打造自己的Reset.css

3、Eric的reset css

4、YUI 3的CSS RESET

5、Less is more – my choice of Reset CSS

首先是最基本的清除padding跟margin：

1
2
3
4

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
margin: 0;
padding: 0;
}

这个我在YUI的基础上进行的修改，去除了pre,code,blockquote三个标签，因为我一般做的项目都是企业或门户型网站，用到这三个标签的机会极少，因此就去除了这三个标签的重置，节省几个字节。

然后是清楚border，一般常用的需要清除的只有fieldset、img两个元素，特别是img，如果不清楚在加上链接的时候会出现蓝色边框。

1
2
3

fieldset, img {
border: 0;
}

对于h标签,我只重置了该标签的font-size其它都没重置，在yui中的font-weight:normal;重置被我去除了，因为在我的使用中的大多数情况下h标签都是需要font-weight:bold的，在这里去除了以后还要加，反而麻烦了。

1
2
3

h1,h2,h3,h4,h5,h6 {
font-size:100%;
}

li标签的list重置，我选择了eric大牛的方法，

1
2
3

ol, ul {
list-style: none;
}

而没有用yui的方法

1
2
3

li {
list-style: none;
}

因为蓝色理想那篇文章里写，前一种方法的性能更好，这个目前没有什么实例证明，不过3个直接姑且就先用第一种吧。

再下来是table的样式

1
2
3
4
5
6
7
8

table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
font-weight:normal;
}

最后几个伪类的样式

1
2
3

:focus {
outline: 0;
}

这个主要是针对非IE浏览器链接点击时的虚线框。

另外我一直很犹豫是否把链接的下划线去掉，经过考虑以后还是不在reset里面去掉了。

秉承够用就好的原则，代码中我去掉了那些我不常用的标签的重置，比如abbr,acronym,sup,sub,code,address,cite,dfn,var,blockquote,q标签，一般项目中基本上用不到，所以就不设置了。strong,em等标签还是使用默认样式，这里也不重置了。

将前面的综合一下最后的代码是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/*
reset css version: 1.0 | 20090714
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, button, textarea, p, th, td {
	margin: 0;
	padding: 0;
}
fieldset, img {
	border: 0;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
}
ol, ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th {
	text-align: left;
	font-weight:normal;
}
:focus {
	outline: 0;
}