什么是 CSS Reset？
在使用 CSS 进行页面样式布局时，浏览器有默认的一些样式表（user agent stylesheet）。这些样式表的作用是给 HTML 元素一个基本的样式，以便页面能够更快速地渲染出来。但是，这些默认样式表的问题在于它们的样式各不相同，同时也不符合设计者的需求，这就导致了浏览器之间的样式差异。
为了解决这个问题，CSS Reset 应运而生。CSS Reset 本质上是一个普通的 CSS 文件，它会把各个浏览器的默认样式表中不同的地方全部清除掉，从而统一页面在各个浏览器中的呈现效果，简单来说，就是将页面所有 HTML 元素的样式都设置成一样的。
CSS Reset 的问题
虽然 CSS Reset 能够解决浏览器样式差异的问题，但是使用它也存在一些问题：
清除了浏览器默认样式，导致样式逐层覆盖：在编写 CSS 样式表时，不同层级之间的样式可能相互嵌套、互相覆盖。在使用 CSS Reset 后，我们可能需要重新设置样式的层级和优先级，这增加了开发难度和维护成本。
过度简化样式：CSS Reset 的设计初衷是清除掉默认样式，让页面样式更统一，但是它也一并清除掉了很多实用的样式，并且很多样式在应用 Reset 后需要重新设置，增加了开发成本。
影响性能： Reset 中的样式很多，如果我们将其全部引入，会影响页面的加载速度。
如何优雅地使用 CSS Reset？
不要一味地引用 Reset
虽然 CSS Reset 能够使不同浏览器下的页面样式更加统一，但是并不是所有的网站都需要 Reset。具体来说，如果您正在使用一个框架，它可能已经包含了 Reset 样式表，因此您不需要再次引入 Reset。
如果您不使用框架，并需要引用 Reset 样式，建议您只引入 Reset 样式表中必要的文件。根据直觉而言，大部分 Reset 中的样式都是 HTML 的默认样式，您可能不会使用一半的样式。
使用 Normalize.css
Normalize.css 相对于 CSS Reset， 不会对页面样式进行过度简化，它只是对浏览器默认样式做了一个统一，同时保留了有用的样式。使用 Normalize.css 能够保证页面在不同浏览器下的样式比较一致，但是还能够尽可能地保留有用的默认样式。
重置样式前，了解目标网站的默认样式
在决定是否要使用 CSS Reset 之前，可以先看一下目标网站的默认样式，进一步了解浏览器默认样式和目标网站所用样式之间的区别。有时，如果你对目标网站的样式和要达到的效果有明确的规划，只需要针对某些标签或属性特定定制样式即可，而不必使用 Reset。
精简样式表
尽管 Reset 和 Normalize.css 都是为了规范浏览器的默认样式，但是它们通常不会覆盖完全相同的样式。因此，如果您同时使用了 Reset 和 Normalize.css，建议您仔细查看两者的差异，并删除其中一个中可能不必要的样式表。
使用预处理器
通过 CSS 预处理器，我们可以把样式进行可重用、可维护的组件化，这样就可以在样式设计时尽量避免样式重复。在使用预处理器时可以引入 Mixins 引用 Reset 样式表设置相同的样式值。
示例代码
以下是使用 SCSS 实现的引用 Reset 的示例代码：
-- -------------------- ---- ------- -- ----- --- ------- ---------------- -- -------- ----- -- ------------------ -------- ------------ -------- ------ ---- - ---------- ----- ------------ -------- ----------- ------ ------------ - ---- - ------- -- - ---------- - -------- ----- ----------------- ------------------ -------- ----- ----------- ----------- -展开代码
结束语
使用 Reset 的问题在于它对页面样式进行了重置，导致您需要重新设置基本样式、布局和其他必要的样式。然而，在正确使用的条件下，CSS Reset 仍然可以被视为使浏览器的样式统一的强大工具。当您使用 Reset 时，建议您仔细查看目标网站的默认样式，选择是否复制并粘贴整个 Reset 样式表，而是只选取必要的部分，或者选择其他替代方案如 Normalize.css。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c3b312314edc2684dc825d
