Reset CSS:只选对的，不选"贵"的

浏览数：39 / 时间：2015年06月09日

先耐人深思，令人回味下：

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:

/*
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯([email protected]), 正淳([email protected])
*/

/* 清除内外边距 */
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 增加了一些元素的默认样式。

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