前言
在前端开发中，我们通常会使用 CSS Reset 来清除浏览器默认样式。然而，有时候 CSS Reset 可能会引发倒退现象（backfiring），导致页面的样式出现意外的变化。本篇文章将介绍 CSS Reset 的倒退问题，并提供解决方案以及预防措施。
什么是 CSS Reset？
CSS Reset 是一种修复 CSS 兼容性问题的技术，通过设置所有 HTML 元素的默认样式（例如 margin、padding 等）来消除不同浏览器之间的差异。常见的 CSS Reset 工具包括 Eric Meyer’s Reset CSS 和 Normalize.css。
如何使用 CSS Reset？以 Normalize.css 为例，只需将其链接至 HTML 页面的 head 部分即可：
<head> <link rel="stylesheet" href="normalize.css"> ... </head>
什么是 CSS Reset 倒退问题？
CSS Reset 倒退问题指的是 CSS Reset 会带来意外的样式变化，甚至与我们原有的样式相冲突。这种倒退问题有许多不同的表现形式，例如字体大小、间距、背景色等等，取决于所使用的具体 Reset 工具和页面样式的特点。
例如，下面这个简单的 CSS Reset 代码可能会引发倒退问题：
* {
margin: 0;
padding: 0;
}在 Reset 后，一些元素的 margin 和 padding 值变为 0，可能导致样式倒退。举个例子，假设我们原先设置一个元素的 margin-left 为 20px，然而 Reset 后该元素的 margin-left 变为 0px。这种情况下，我们会发现样式出现了倒退。
如何解决 CSS Reset 倒退问题？
有几种方法可以解决 CSS Reset 倒退问题：
方法一：使用精简版的 Reset
大多数情况下，我们使用 CSS Reset 的目的是为了确保页面的兼容性和一致性。如果你的页面样式相对简单，可以考虑使用精简版的 Reset。
本篇文章的开头已经介绍了 Eric Meyer’s Reset CSS 和 Normalize.css，它们都提供了精简版的 Reset。以 Normalize.css 为例，它的精简版仅仅清除了 HTML 元素的 margin 和 padding：
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}方法二：针对特定的元素重置样式
如果你不想使用精简版的 Reset，可以选择针对特定的元素重置样式，而不是针对所有元素。例如，如果你希望 Reset 不影响表单元素的样式，可以重置表单元素的样式，而不要针对所有元素进行 Reset。
下面是一个简单的 Reset 表单元素的例子：
-- -------------------- ---- ------- ------ ------- -------- - ------- -- -------- -- ------- ----- -------- ----- ---------- -------- ------------ -------- ------ -------- ----------------- ------------ -
方法三：在样式表中覆盖 Reset 样式
如果你已经使用了 Reset，但是发现出现了倒退问题，可以尝试在样式表中覆盖 Reset 样式。这需要你对样式表进行调试和修改，以确保样式的兼容性和一致性。
下面是调试 Reset 样式的一个例子。假设我们正常情况下要让所有链接显示下划线，然而 Reset 之后链接却不显示下划线。我们可以在样式表中添加一条 CSS 代码，覆盖 Reset 样式：
a {
text-decoration: underline;
}方法四：使用预处理器优化 Reset
如果你使用的是 CSS 预处理器（如 Sass、Less、Stylus 等），可以使用预处理器优化 Reset。预处理器通常提供了一些有帮助的功能，例如 mixin 和变量，可以让 Reset 更加灵活和易于维护。
下面是一个使用 Sass 优化 Reset 的例子。我们定义一个 $margin 为 0，然后在重置样式时使用该变量：
$margin: 0;
* {
margin: $margin;
padding: 0;
}如何预防 CSS Reset 倒退问题？
除了上述解决方法，还有一些预防措施是可以采取的：
排查 Reset 工具的缺陷
在选择 Reset 工具时，应该仔细研究其文档和使用方法，确定其是否存在缺陷或限制。可以查看其 GitHub 仓库或讨论区，以了解其他开发者的经验和意见。
在预览窗口中测试 Reset
在开发过程中，我们通常会使用预览窗口（如 CodePen、JSFiddle 等）测试页面的样式。在使用 Reset 时，应该先在预览窗口中测试 Reset 是否会出现倒退问题，以便及早发现和纠正问题。
在多种浏览器中测试 Reset
在使用 Reset 之前，应该在多种浏览器中测试所需的样式，并确保 Reset 不会引发样式倒退。测试时，应该使用各种浏览器的开发者工具，如 Chrome DevTools、Firefox Developer Edition，以及 Safari Inspector。
结论
CSS Reset 是一种非常有用的方法，可以清除浏览器默认样式，确保页面的兼容性和一致性。然而，CSS Reset 也可能带来样式倒退问题，导致样式出现意外的变化。本篇文章介绍了 CSS Reset 倒退问题的原因和解决方法，以及预防措施，希望对你的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704d971d91dce0dc8507318