在开发移动端网页时，使用 CSS Reset 是一个很好的习惯。它能够统一不同浏览器默认的样式，避免元素之间出现不一致的情况。但是，CSS Reset 的错误应用可能导致更多的问题，因此我们需要深入了解如何正确使用 CSS Reset。
什么是 CSS Reset？
CSS Reset 是一段样式代码，用来重置浏览器默认样式。它可以让网页开发者获得更多自由的控制权，而不是被限制在浏览器默认样式中。CSS Reset 可以让我们用一套样式代码，使多个浏览器绘制同样的网页效果。
CSS Reset 的错误应用
尽管有很多 CSS Reset 库和文件可供选择，但错误应用 CSS Reset 也会导致更多问题。
过于深度重置
有些 Reset 代码可能太过深度，它可能会移除掉一些很有用的浏览器默认功能，比如 tab 键键盘导航。浏览器默认样式有助于网页体验和可访问性，所以深度移除可能不是最好的选择。
过度使用通用选择器
通用选择器（*）会对每个元素应用样式，这会降低网页性能。使用通用选择器还可能导致 Apply Style 的性能低下。正确的用法是，只对那些需要修改的元素应用样式。
过度重置表单元素样式
表单元素的默认样式是有意义的，因为它们与可访问性和可用性有关。过度重置表单元素样式可能会减少用户体验。
遇到浏览器 Bug 时过度重置
解决浏览器 Bug 的恰当方式，取决于具体的问题。在做出决定之前，开发者需要考虑到不同浏览器之间的差异以及修复浏览器 Bug 的后果。如果过度重置浏览器样式，不仅可能会影响其他浏览器，而且可能会影响网页的总体表现。
如何正确使用 CSS Reset？
为了防止 CSS Reset 出现上述问题，我们可以采取以下方法：
引入 Reset 样式表时，仔细剖析其代码
我们需要确保使用的 Reset 样式表只重置了必要的样式，而不是过度重置。我们还应该仔细注视不同的 Reset 库和文件的样式代码，找到其中不必要的通用选择器和标签名，从而改进我们的样式代码。
创建自己的 Reset 样式
我们可以编写自己的 Reset 样式，以削减 Reset 库中不必要的代码，只保留必要的部分。这样，我们可以使用精准的样式代码灵活地控制元素效果，提高用户体验。
比如，以下是一个简单的 Reset 样式表：
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ol, ul, li, table, tr, td, form, input, textarea {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}使用 Normalize.css
Normalize.css 是一个可以使浏览器样式更统一的轻量级样式库。它是一个具有渐进增加特性的库，可以消除主流浏览器之间的一些差异。它与 Reset 样式表不同，Normalize.css 只会针对那些不同浏览器之间的不相容问题进行修复。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- -------------------- ----------------- ----- ---------------- ----------------- ------- ------ ---- ------- ---- --- ------- -------
结论
CSS Reset 在移动端开发中是一个非常有用的工具。然而，我们需要小心地应用它，以避免过度重置样式，从而影响用户体验和可访问性。我们可以选择自己编写 Reset 样式或使用现有库来避免出现这种问题。如果我们正确应用 Reset 样式表，我们就可以使移动端网页的样式更加一致，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bae5ed657e1f70db92155