在开发网站或者 Web 应用时，我们通常会使用 CSS Reset 来使不同浏览器中的元素默认样式表现统一。但是，选择正确的 CSS Reset 方案 却是一个比较复杂的问题。
什么是 CSS Reset？
默认情况下，不同浏览器对 HTML 元素的样式处理可能存在差异，这可能会导致网页呈现出不一致的效果。CSS Reset 是一种技术，它可以帮助消除这些差异，使得不同浏览器的默认样式表现更加一致。
选择正确的 CSS Reset 方案至关重要。错误的方案可能会导致我们在某些浏览器或设备上产生不可预知的样式问题，或者增加我们在维护与扩展网站或 Web 应用时的工作量。
那么，如何选择正确的 CSS Reset 方案呢？
1. 理解 Reset 影响的元素
重要的一步是要理解 CSS Reset 所影响的所有元素以及它们的默认样式。一些 CSS Reset 可能会影响不止 HTML 元素，还可能影响 HTML5 新元素（如 和 ）等。
因此，在选择 CSS Reset 时，我们需要确保方案能够恰当处理我们网站或者 Web 应用中使用到的所有元素。
2. 考虑 Reset 对 Web 应用的影响
CSS Reset 可能会影响我们现有的 Web 应用中的样式，甚至可能会与我们自己编写的样式冲突。例如，某些 Reset 可能会使某些元素的 CSS 样式值重置为 0 或者无法解析。
因此，在选择 CSS Reset 方案时，我们需要对我们自己的样式表进行分析，判断此 Reset 方案是否会与我们的样式产生冲突，是否会导致 Web 应用代码的重构。
在此基础上，我们可以更好地进行方案的选择，以确保 Web 应用能够继续正常工作。
3. 考虑 Reset 与框架或库的结合
现代化的 Web 应用通常会基于某些框架或库来构建。因此，我们在选择 CSS Reset 方案时，还需要确保 Reset 与我们所使用的框架或库兼容，以便它们能够协同工作。
例如，Bootstrap 框架使用的 Reset 方案与 Foundation 框架使用的 Reset 方案肯定会存在一些区别，在选择 CSS Reset 时，我们需要考虑到这些区别。
4. 善于比较不同的 Reset 方案
在选择 CSS Reset 时，我们不必一定选择最流行的 Reset 方案。原因是不同的 CSS Reset 方案可能会使用不同的执行方式，其中每个 Reset 方案均有其优点和缺点。
因此，我们应该熟悉不同的 CSS Reset 方案，并选用适合自己网站或 Web 应用的 Reset 方案。同时，我们应该在比较不同方案时，关注 Reset 方案的大小、样式重新定义数量、元素类型数量等。
5. 选择最适合的 Reset
最终，我们需要选择最适合我们自己的 Reset 方案，以提升 Web 网站或 Web 应用的稳定性和性能。
以下是一个 CSS Reset 示例代码：
// javascriptcn.com 代码示例
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;
}总结
选择正确的 CSS Reset 方案对于网站或 Web 应用的开发来说非常重要。在选择 Reset 方案时，我们需要理解 Reset 影响的元素、考虑 Reset 对 Web 应用的影响、考虑 Reset 与框架或库的结合、善于比较不同的 Reset 方案以及选择最适合的 Reset 方案。
希望本文能够给予读者有关如何选择 CSS Reset 的有帮助的指导和建议。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654809a17d4982a6eb259459