CSS Reset

最新推荐文章于 2022-01-11 11:39:10 发布

原创最新推荐文章于 2022-01-11 11:39:10 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS Reset #CSS重设 #CSS

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了CSSReset的概念及其在解决浏览器默认样式的差异性上的作用，同时指出了滥用CSSReset可能导致的负面影响，如破坏基本样式、外观失调、额外性能消耗等问题。建议在使用时谨慎评估其适用场景。

一.为什么要CSS Reset

解决浏览器在默认样式上的诸多差异和问题。现代浏览器这方面差异很小，因此CSS Reset的必要性没有那么高了。

二.淘宝KISSY CSS Reset

下载自：IconFont阿里巴巴矢量图库。从中导出的的web字体文件所带的demo.css

/*
KISSY CSS Reset
理念：
1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
特色：
1. 适应中文；
2. 基于最新主流浏览器。
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
 */

/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
  margin: 0;
  padding: 0;
}

/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { 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; }


/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

/* 清除浮动 */
.ks-clear:after, .clear:after {
  content: '\20';
  display: block;
  height: 0;
  clear: both;
}
.ks-clear, .clear {
  *zoom: 1;
}

三.滥用CSS Reset带来的问题

1.不当的CSS Reset 破坏了所有浏览器的基本样式。像：

*{ margin:0; padding:0; }

2. 粗暴的reset导致控件外观可能在特定浏览器下失调。

3. 某些use case中，网页中有有一些较高独立性的部分，比如内嵌编辑器、widget、第三方内容等，CSS reset导致这部分的样式常需要完全重新覆写，而这种覆写本来可能大部分是不必要的，令人烦躁且可能遗漏。

4.性能问题。

(1).CSS reset平白无故的增加了CSS文件的大小。即使0.1秒的载入时间差异也会影响互联网企业的收入的。

(2).增加浏览器进行样式计算的成本（即有一定的性能负担），因为它引入了许多的针对元素的全局规则，网页中几乎所有元素都会匹配一条乃至几条的reset规则，且往往规则中的属性设定其实会被更specific的规则所覆盖（比如padding和margin）。极端情况下，可能某条reset规则中的所有属性设置实际上并没有在任何元素上生效（因为全部被更specific的规则给覆盖了），所有针对此规则的级联计算全都是浪费。

参考：

1.到底该不该用CSS Reset？-知乎

2.CSS reset的重新审视 – 避免样式重置