什么是 CSS Reset
CSS Reset 是一种预设的 CSS 样式表，用于重置或规范浏览器默认样式，避免在不同浏览器上渲染出不一致的效果。当我们在开发网站或应用时，经常会遇到浏览器默认的样式会影响我们自定义的样式，导致布局错乱、字体大小、颜色不一致等问题。
为什么要使用 CSS Reset
由于不同浏览器对 HTML 和 CSS 规范的实现有所不同，因此我们在不同浏览器上渲染相同的页面时，经常会出现样式不一致等问题。使用 CSS Reset 可以确保我们在各种浏览器上得到一致的布局和外观，从而提高开发和设计的效率。
遇到的坑
在使用 CSS Reset 的时候，我们经常会遇到以下几个问题：
问题一：覆盖过度
CSS Reset 的目的是为了规范浏览器的默认样式，以便我们在不同浏览器上得到一致的布局和外观。然而，如果我们过于依赖 CSS Reset，会导致我们的自定义样式被覆盖从而失去自定义的效果，这是我们不想看到的。
问题二：覆盖不彻底
有些情况下，浏览器的默认样式是非常强大的，即使使用 CSS Reset 也无法完全覆盖。比如，使用 CSS Reset 可以重置页面中所有元素的外边距和内边距，但是它并不能重置一些关键的样式属性，如块级元素和行内元素之间的行高、文本的对齐方式等。
问题三：增加了样式代码的数量和大小
CSS Reset 会增加额外的样式代码，从而增加页面的大小和加载时间。如果我们只是在开发一个小型网站或应用程序，使用 CSS Reset 可能并不是必要的，因为这会增加额外的开销。
解决方案
方案一：选择恰当的 CSS Reset
当使用 CSS Reset 时，我们应该针对实际情况选择合适的 CSS Reset 以及执行范围。例如，对于一个大规模网站而言，推荐使用覆盖力强的 CSS Reset，而对于一个小型应用程序，只需要针对重要元素的样式进行重置即可。
方案二：合理使用后代选择器
合理使用后代选择器可以避免我们过度依赖 CSS Reset。例如，如果我们在父元素上设置了默认的外边距和内边距，那么我们可以使用后代选择器，将父元素的样式限定在子元素中。
.parent {
margin: 0;
padding: 0;
}
.parent .child {
/* 子元素的样式 */
}方案三：按需重置关键样式
如果我们只需要修改某些关键样式，我们可以使用样式覆盖的方式，而不是完全使用 CSS Reset。例如，我们可以针对块级元素和行内元素之间的行高进行重置。
* {
margin: 0;
padding: 0;
line-height: 1.5; /* 行高重置 */
}方案四：优化性能
我们可以通过压缩 CSS Reset 四减少 CSS 文件大小。可以采用 CSS 压缩工具，如 CSSNano，它可以将 CSS 代码尽可能的简化和压缩，从而减少 CSS 文件大小和加载时间。
结论
在使用 CSS Reset 的时候，我们应该清楚其作用和局限性，选择恰当的 CSS Reset 并执行范围。我们需要避免过度依赖 CSS Reset，同时合理使用后代选择器和按需重置关键样式，优化性能。这将有助于我们规范页面样式，提高设计和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c1b0b14b275ea6fe496b1