当我们写 CSS 样式的时候，经常需要先定义一些全局样式，在起始点处将某些属性重置到默认值，这被称为“CSS 重置”。然而，现在的开发者们更倾向于使用 Resets，即一系列样式表，旨在消除浏览器之间的样式差异，以便我们更好地控制页面布局。然而，Resets 不是一个好的 CSS 重置解决方案，本文将从以下几个方面解释原因，同时指导读者如何更好地实现 CSS 重置。
Resets 的不足
Resets 容易被滥用
Resets 固然有其优点，如提高开发效率、增强跨浏览器兼容性等，但是使用 Resets 也有很多缺点，其中之一就是容易被滥用。Resets 并不是适用于所有情况的“银弹”，有些情况下使用 Resets 可能会加大我们的工作量，同时减慢页面加载速度。因此，我们需要根据实际情况，合理地应用 Resets。
Resets 可能会破坏现有样式
另一个问题是，Resets 可能会破坏现有样式。当我们应用 Resets 时，它很可能会强制每个元素都使用相同的样式，这可能会导致某些元素的样式出现问题。例如，如果某个元素具有自定义样式，Resets 可能会将它们还原为默认值，这会导致样式被覆盖，从而使元素的外观与设计不相符。
Resets 并不是最佳实践
我们需要了解的最重要的一点是，Resets 并不是最佳的实践。 更好的方法是使用 Normalize.css，它是一种更加稳健的 CSS 重置解决方案。相比于 Resets， Normalize.css 更加慎重，只重置浏览器不良属性，并保留有用的标准样式， 以便我们在页面中更好地控制元素的样式。
如何更好地实现 CSS 重置
下面是一些关键点，在实现 CSS 重置的时候可以考虑：
不要过于频繁地使用 Resets
在大多数情况下，不需要使用 Resets，只有当我们想要彻底控制布局时，才需要使用 Resests。如果我们没有必要使用 Resets，最好不要使用它，可以直接使用我们认为正确的样式。
选用适当的 CSS 重置解决方案
在选择 CSS 重置解决方案时，我们应该考虑到该解决方案是否与我们的项目完全匹配。 我们可以找到一些更好的解决方案，例如 Normalize.css，它旨在消除浏览器之间的样式差异，并使我们的 CSS 更加一致。
适当地重置样式
如果我们决定重置 HTML 或 Body 标记，我们需要了解一些有用的信息。在实际操作中，我们应该适量更改元素的样式，而不是全部改变。例如，如果我们想要重置 HTML、 Body 标记的样式，我们可以选择重置常用框模型属性，如大小、边框和填充，并使文本颜色保持一致。这将避免样式混乱的问题，同时也会更加确保我们在处理细节时更加准确。
示例代码
下面是一段示例代码，用于清理键入文本时浏览器的样式：
-- -------------------- ---- ------- -- -- ------------- -- --- -- -- -- ------- -- ------ ------- -------- - ------- ----- -- ------- -- ----- -------- -- ------- -- ------ -------- -- ------- -- ----------- ----- -- --------- -- -------- -- -- -------- -- ------- -- -- -------- -- -------- ----- -- -------- -- ----------- ----- -- ---------- -- - -- -------- -- ---- - -------- ----- ---------- ----- ------- -- -------- -- - ------------------- -------- - ----------- ----- -
结论
尽管 Resets 可以帮助加快开发效率和提高跨浏览器兼容性，但它并不是理想的 CSS 重置解决方案。为了更好地实现 CSS 重置，我们应该尽可能少用 Resets，选择合适的 CSS 重置解决方案，并适当地重置样式。最终目标是使我们的样式表更加清晰明了，易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ee4fa06fbf9601972146b8