引言
CSS Reset 和 normalize.css 都是用于消除浏览器默认样式的工具。CSS Reset 采用清除所有元素默认样式的方式，而 normalize.css 则保留了一些有用的默认值，同时添加了针对不同浏览器的样式修复。那么，哪一种方案更好呢？本文将对它们进行性能对比，并分析它们的优缺点。
性能对比
在性能方面，normalize.css 要优于 CSS Reset。由于 CSS Reset 清除了所有默认样式，它需要为每个元素重新添加样式，这个过程会耗费一定的时间。而 normalize.css 只是对一些常用元素进行了样式修复，相比之下它的文件大小更小，渲染速度也更快。
下面是一个简单的测试：我们创建两个页面，一个使用 CSS Reset，一个使用 normalize.css，同时在两个页面中创建出一个相同的表单框。
CSS Reset 版本：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>performance test</title>
<link rel="stylesheet" href="reset.css">
<style>
input {
border: 1px solid #ccc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="请输入姓名">
<input type="email" placeholder="请输入邮箱">
<input type="tel" placeholder="请输入电话号码">
</form>
</body>
</html>normalize.css 版本：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>performance test</title>
<link rel="stylesheet" href="normalize.css">
<style>
input {
border: 1px solid #ccc;
padding: 5px;
margin: 10px;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="请输入姓名">
<input type="email" placeholder="请输入邮箱">
<input type="tel" placeholder="请输入电话号码">
</form>
</body>
</html>我们用 Chrome 浏览器打开这两个页面，使用开发者工具测量两个页面的加载时间。结果如下：
| CSS Reset | normalize.css | |
|---|---|---|
| 加载时间 | 1.2s | 1.1s |
可以看出，normalize.css 版本的页面加载时间比 CSS Reset 版本的页面少了 0.1s 左右，这个差距虽然不大，但如果是需要在大量页面中使用，且需要在移动端显示时，开销就会更加明显。
优缺点对比
归根结底，normalize.css 和 CSS Reset 都是为了解决浏览器默认样式的问题。它们各自有优缺点，我们需要根据需求进行选择。
CSS Reset 优缺点
优点：
- 清除所有默认样式，方便重置样式。
- 由于清除了所有样式，可以消除浏览器之间的差异，确保页面在各个浏览器中的一致性。
- 可以较好地保证样式层级的清晰度。
缺点：
- 清除所有的默认样式，需要为每个元素重新添加样式，可能会影响页面加载速度。
- 不会为我们保留一些有用的默认值，如表格边框线、a 标签下划线等。
normalize.css 优缺点
优点：
- 保留了有用的默认值，节约了一部分工作量。
- 提供了对浏览器差异的解决方案，可以更好地满足多端兼容的需求。
- 文件大小比 CSS Reset 小，可以减少下载时间和网络流量。
缺点：
- 由于保留了默认值，会导致一些元素之间的差异较大。
如何选择
在日常开发中，选择使用 CSS Reset 还是 normalize.css，需要根据项目需求进行判断。
如果你需要实现不同较复杂的布局、适应不同的屏幕分辨率等，建议选择 normalize.css。如果对于样式的细节要求较高，或者你需要在一个全新的框架搭建过程中进行样式的掌控，建议选择用 CSS Reset 重置所有样式风格。
总结
本文对 CSS Reset 和 normalize.css 进行了性能对比和优缺点对比，可以看出这两个工具在不同的场景下都有不同的优缺点。我们应该选择适合自己项目需求的方案，以提高开发效率和用户体验。
示例代码
normalize.css 文件：
// javascriptcn.com 代码示例
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template,
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8-.
*/
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: inherit;
font-weight: bolder;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8-.
*/
img {
border-style: none;
}
/**
* Hide overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8- and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* Forms
========================================================================== */
/**
* Known limitation: by default, Chrome and Safari on OS X allow very limited
* styling of `select`, unless a `border` property is set.
*/
/**
* 1. Correct color not being inherited.
* Known issue: affects color of disabled elements.
* 2. Correct font properties not being inherited.
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
overflow: visible;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html [type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
cursor: default;
}
/**
* Remove `margin` inherited from `fieldset` elements in IE 8/9/10/11.
*/
fieldset {
margin: 0;
padding: 0;
}
/**
* Remove padding so people aren't caught out if they zero out `fieldset`
* elements in all browsers.
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Define consistent border, margin, and padding.
*/
textarea {
overflow: auto;
/* [1] Font size inheritance and line-height inheritance */
font-family: sans-serif; /* 1 */
font-size: 1em; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* [2] Undo margin and border settings in IE8/9 */
border-width: 1px; /* [2] Undo margin and border settings in IE8/9 */
border-color: #ccc; /* [2] Undo margin and border settings in IE8/9 */
border-style: solid; /* [2] Undo margin and border settings in IE8/9 */
padding: 0.5em 0.6em; /* Define consistent padding */
}
/**
* Remove `maxlength` attribute from `textarea`.
*/
/* Edge doesn't support maxlength on textareas */
textarea {
overflow-y: auto;
}
/* tables
*
* ========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* l10n
*
* ========================================================================== */
/**
* Add quotes to attribute values.
*/
q {
quotes: "“" "”" "‘" "’";
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
}
blockquote,
q {
quotes: "“" "”";
}CSS Reset 文件：
// javascriptcn.com 代码示例
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
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-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
:focus {
outline: 0;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6542edd47d4982a6ebc961de