在前端开发中，CSS Reset 和 normalize.css 是两种常见的方式来重置默认的 CSS 样式。它们的目的是解决不同浏览器间默认样式的不兼容性问题。本文将对两种方式进行比较，分析它们的优缺点。
CSS Reset
CSS Reset 是一种通过重置浏览器默认样式的 CSS 文件。它的思路是将网页中所有的 HTML 元素的默认样式全部抹去，然后再自己编写所有元素的样式，这样就能保证在不同浏览器下元素的表现基本一致。
优点
- 重置 CSS 后，开发者可以从头开始设计自己的样式，自由度极高，没有样式上的限制。这样可以更加容易的实现自定义样式。
- 由于清空了默认样式，开发者的文件大小也大大降低，可以提高网页的加载速度。
- CSS Reset 的实现也相当简单，可以通过一个简单的 CSS 文件就可以完成。
缺点
- CSS Reset 因为清空了浏览器默认样式，所以就需要开发者花费几倍甚至更多的时间来重构样式，从而弥补已有样式的缺失，这对时间和成本都是巨大的，特别是对于初学者来说。
- 由于重置了默认样式，意味着使用者需要自己去重写样式。但如果使用者写的样式不够全面，某些样式在不同浏览器下还是会出现差异。
示例代码
/* css reset */
html, body, div, span, applet, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}normalize.css
normalize.css 是一种基于现代浏览器的 HTML5 元素和事件的可靠重置 CSS 库。它的目的是让开发者使用标准化的样式来保证每种浏览器的选择器都具有相同的表现，从而达到最小化的差异。
优点
- normalize.css 与 CSS Reset 方式相比，它更加细致，将开发者需要重新编写的样式降到了最低限度，从而能够省下大量的时间和成本，并且可以更好用的支持不同浏览器和操作系统。
- normalize.css 开箱即用，对于初学者来说，学习和使用都非常方便。
- normalize.css 能更好地实现样式的继承，可在使用的时候减少代码量。
缺点
- 尽管 normalize.css 相对来说细致了很多，但还是无法满足每一个使用者的需求。
- normalize.css 的库文件比 CSS Reset 的文件要大，会影响网页加载速度，尽管它已经用了很多的技巧来减少加载时间。
示例代码
/*!
* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
*/
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Remove the margin on nested lists in Chrome and Safari.
*/
dl dl,
dl ol,
ol ol,
ul ul {
margin: 0;
}
...
总结
综上所述，CSS Reset 和 normalize.css 都是解决浏览器默认样式不兼容的技术手段。它们各有优缺点，开发者需要根据实际需求选择使用。如果需要自定义样式和更好的控制，使用 CSS Reset 比较合适；如果是初学者或者快速构建网页的话，推荐使用 normalize.css。
我们强烈建议开发者考虑使用 normalize.css 这种细致度更高的重置方式，因为这能够极大地提高开发效率，减少样式代码的编写次数，打造一致性更强的样式效果，从而为用户提供更好的、更一致的浏览体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65baf1a9add4f0e0ff3875da