CSS Reset 及其影响对比-JavaScript中文网-JavaScript教程资源分享门户

1. 什么是 CSS Reset？

CSS Reset 是一种前端开发中常用的技术，通过一系列的 CSS 样式，将浏览器默认的样式全部重置，达到不同浏览器的统一。这样可以在开发过程中更加方便地编写自己的 CSS 样式。

虽然 CSS Reset 可以达到统一样式的效果，但它也有其不好的地方。比如我们常用的一些标签，如 a、p、h1 等，因为 CSS Reset 的存在，其样式完全常常被覆盖，需要自己再次编写样式，增加了工作量。

更重要的是，在某些情况下，CSS Reset 会对网站产生意外的影响。例如，当使用 CSS Reset 消除表格边框时，可能会使用以下代码：

table {
  border-collapse: collapse;
  border-spacing: 0;
}

这样可以避免表格中的多于边框，可是一些高级表格，如需要自定义格线的表格，可能就会受到影响。

针对 CSS Reset 带来的负面影响，一些前端工程师发明了 Normalize.css，一种在 CSS 样式层面上解决浏览器样式不统一的技术（如：重置元素的执行效果，保留它本来的设计意图，并且符合如今的 Web 标准）。

相比于 CSS Reset，Normalize.css 不是完全消除浏览器的样式，而是在这个基础上进行适度、轻微的“重启样式”，尤其对于表现不支持的 bug 和性能较差的浏览器（比如 IE）进行了较好的兼容性处理。

如果选择使用 Normalize.css，首先需要将其导入到项目中，例如：

<head>
  <link rel="stylesheet" href="normalize.css">
</head>

CSS Reset 或 Normalize.css 并非适用于所有情况。必须考虑到自己项目的实际情况。比如，如果网站需要定制化的样式，那么就不需要使用这两种方式，而应该根据项目需求和设计风格自行编写样式规则。

然而，在进行原型设计或者前期，使用 CSS Reset 或 Normalize.css，可以将一些基础的样式重置，帮助前端工程师更容易地进行后续的样式编写。

如果考虑采用 CSS Reset 或 Normalize.css，而现有的规则不适用于自己的项目，那么就需要进行自定义。

以 Normalize.css 为例，需编辑 normalize.css 文件，根据自己的需求进行修改。例如，我们可以修改全局的字体颜色及字体大小：

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: #333333;
}

以上代码将字体设置为黑色，大小为 16 像素。由于 body 元素被用于全网站，所以这些样式会直接影响整站的所有文本。

总之，CSS Reset 及其核心的 Normalize.css 是帮助前端工程师解决浏览器样式不统一问题的有力工具，同时也对网站的性能、可维护性和用户体验有很大的促进作用。但我们需要根据项目具体情况，选择适合自己的解决方案，有效地管理好代码，提高工作效率。

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