在项目中怎么统一使用 CSS Reset？

在编写前端样式的过程中，我们通常会遇到相同的问题：浏览器默认样式的存在。这些默认样式既不美观，也会导致兼容性问题。为了解决这个问题，我们可以使用 CSS Reset。CSS Reset 是通过一系列定义，去除浏览器默认样式的技术手段。

CSS Resets 的分类

有很多种 CSS Resets，根据它们对页面元素的重置程度，可以分为三类。

针对特定元素的 Resets

这种 Reset 只对特定的元素进行样式重置，比如对ul,ol等特定元素的样式进行重置。

针对页面全局的 Resets

这种 Reset 将页面所有元素的默认样式进行重置。这样做可以确保所有元素都具有相同的基本样式，以便更容易地进行设计和开发。

基于 Normalize.css 的 Resets

Normalize.css 是一种不同于传统 CSS Reset 的 CSS 框架。 Normalize.css 会将所有元素的默认样式中存在的差异都进行消除。该框架能够使页面元素更加一致、更具可定制性和更易于管理。

如何选择和使用 CSS Resets

针对不同的项目和需求，我们需要采用不同的 CSS Resets。

如果对页面的设计和开发要求不高，可以选择一些针对特定元素的 Resets，这些 Resets 会对指定的元素进行重置。例如：

ul,li,h1,h2,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

如果需要一种完整的基于 Normalize.css 的 Reset，可以在页面的 head 中添加如下代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"/>

需要注意的是，如果我们同时使用多种 CSS Resets，可能会产生不必要的冲突，只有在明确的需求和场景下，才应考虑使用多种 Resets。

总结

CSS Reset 可以帮助我们解决浏览器默认样式的问题，让我们更加容易对页面样式进行设计和开发。选择不同的 Resets 依据需求进行使用，同时需要避免多种 Resets 之间的冲突。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65940e17eb4cecbf2d8a2293