CSS Reset 是一种非常常见的前端技术，用于重置 CSS 样式，以解决浏览器之间的样式差异问题。在这篇文章中，我们将对比十种常见的 CSS Reset，并讨论每种 Reset 的优缺点，以及哪种 Reset 更适合不同的项目。让我们开始！
1. Normalize.css
Normalize.css 是最常见的 CSS Reset 之一，它的主要优点是：能够保留有用的浏览器默认值，让你获得一个更加一致的跨浏览器体验。同时，Normalize.css 非常灵活，支持 Sass 和 Less，可以方便地定制样式。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------
-------
------
---------- -----------
-------
-------2. Reset CSS
Reset CSS 是一种非常极端的 Reset，它将所有 HTML 元素的 margin、padding、border 等重置为 0，让你从一个干净的地方开始构建页面。Reset CSS 缺点是它可能破坏了一些有用的默认值，例如 input[type="checkbox"] 中的方框。同时，Reset CSS 不支持 Sass 和 Less。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -----------------
-------
------
---------- -----------
-------
-------3. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 之一，它为每个 HTML 元素都提供了一个全局样式表，并复位了所有元素。Eric Meyer's Reset CSS 优点是它已经被广泛使用并且可以在大多数浏览器中使用，同时，它能够保留一些有用的默认值。缺点是它没有 Sass 和 Less 支持，且可能会破坏一些默认的用户样式。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ----------------------------
-------
------
---------- -----------
-------
-------4. HTML5 Reset
HTML5 Reset 提供了一组通用的样式表，用于重置 HTML5 的标签元素。它是为了解决 HTML5 标签与浏览器样式之间的不兼容而设计的。HTML5 Reset 优点是它很容易使用，支持 Sass 和 Less。缺点是它可能会打破一些有用的默认值，并且不如其他 Reset 强大。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -----------------------
-------
------
---------- -----------
-------
-------5. Yahoo! Reset CSS
Yahoo! Reset CSS 是由 Yahoo! 开发的一种 Reset，它基本上与 Eric Meyer's Reset CSS 相同，但提供了更好的文件组织。它包含三个文件：reset.css、fonts.css 和 grids.css。Yahoo! Reset CSS 优点是它拥有一个清晰的结构，对于大型项目非常有用。缺点是它不是很强大，且不支持 Sass 和 Less。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -----------------------
-------
------
---------- -----------
-------
-------6. Universal Selector Reset
Universal Selector Reset 是一种非常简单的 Reset，它用通配符 * 来覆盖所有 HTML 元素的默认值。这种 Reset 能够轻松地消除不同浏览器之间的差异。Universal Selector Reset 优点是它非常容易使用，支持 Sass 和 Less。缺点是它可能会打破有用的默认值。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ------------------------------------
-------
------
---------- -----------
-------
-------7. Microsoft Reset CSS
Microsoft Reset CSS 是为解决 IE6 和 IE7 的兼容性问题而开发的 Reset，它包含了一些解决 IE6 和 IE7 浏览器默认值导致的问题的代码。Microsoft Reset CSS 优点是它解决了一些兼容性问题。缺点是它不是很强大，而且可能会破坏一些有用的默认值。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- ---------------------------
-------
------
---------- -----------
-------
-------8. Blueprint CSS
Blueprint CSS 是一种 CSS 框架，不仅包含了 Reset，还包含了预定义的 CSS 样式类。Blueprint CSS 的优点是它提供了许多有用的预定义样式，对于快速构建基础页面非常有用。缺点是它可能会破坏网站的个性化风格，并且不支持 Sass 和 Less。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------------
-------
------
---------- -----------
-------
-------9. Tripoli CSS Reset
Tripoli CSS Reset 是一个很小的 Reset，它专注于容器和网格。它提供了一种简单方法来创建列和网格，并消除浏览器默认值的影响。Tripoli CSS Reset 优点是它非常快速和简单，支持 Sass 和 Less。缺点是它不够灵活，而且可能破坏有用的默认值。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- -------------------------
-------
------
---------- -----------
-------
-------10. Base CSS
Base CSS 是一种简约的 Reset，它只提供了一些基本的 CSS 样式，如字体大小、link 颜色等。Base CSS 优点是它非常简单，支持 Sass 和 Less。缺点是它可能不足够强大，并且缺乏自定义选项。
-- -------------------- ---- -------
--------- -----
------
------
----- ---------------- --------------------
-------
------
---------- -----------
-------
-------总结
在十种 CSS Reset 中，每一种都有其优点和缺点，适用于不同的项目和需求。下面是一个简短的总结：
- 如果你想保留有用的浏览器默认值并定制样式，使用 Normalize.css。
- 如果你想从干净的地方开始构建页面，快速消除所有默认值，使用 Reset CSS。
- 如果你想使用传统的 Eric Meyer's Reset CSS，或者你需要分离三个文件的 Yahoo! Reset CSS，可按需使用。
- 如果你在使用 HTML5 标签时遇到了样式不兼容的问题，使用 HTML5 Reset。
- 如果你使用 IE6 和 IE7，使用 Microsoft Reset CSS 可能有好处。
- 如果你需要高度定制化的样式，并且不需要 Sass 和 Less 的支持，可以考虑使用 Blueprint CSS。
- 如果你需要简单和快速的重置，使用 Universal Selector Reset 或 Tripoli CSS Reset。
- 如果你只需要一些基本的 CSS 样式，使用 Base CSS 即可。
在你选择 CSS Reset 的时候，你应该考虑项目的特定需求和对默认值的需求，以决定哪种 Reset 更合适。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64804a2648841e9894fc6a96