在前端开发中，我们经常需要样式重置或标准化来消除浏览器之间的差异，减少不必要的 hack，而这个过程通常是相当繁琐的。
幸运的是，现代的前端生态系统中有许多常用的工具和框架，能够帮助我们快速地重置或标准化 CSS 样式。其中一款很受欢迎的工具是 npm 包 reeeset。
本文将介绍 reeeset 的使用方法，具体内容包括：
- reeeset 是什么
- 如何在项目中安装 reeeset
- reeeset 的使用方法
- 示范代码及运行效果
reeeset 是什么
reeeset 是一款基于 normalize.css 开发的 CSS 样式重置或标准化工具，与 normalize.css 不同的是它采用一些更为激进的样式处理技巧，以消除浏览器之间的差异。
reeeset 在处理样式时，不但重置了默认样式（例如 margin 和 padding），还考虑了元素之间、不同浏览器之间的差异性，更加彻底地解决了样式问题。
如何在项目中安装 reeeset
安装 reeeset 的方法非常简单，只需要打开命令行工具，进入到需要安装的项目根目录下，并使用以下命令进行安装：
npm install reeeset
安装完成后，你可以在项目中使用此工具来重置或标准化你的 CSS 样式。
reeeset 的使用方法
在你的项目中使用 reeeset 主要有两种方法：
- 将 reeeset 作为你的默认样式表
使用此方法时，reeeset 会取代浏览器的默认样式，使你的页面在各个浏览器中呈现一致的效果。
在 HTML 文件的 <head> 标签内，添加以下代码：
<link rel="stylesheet" href="node_modules/reeeset/reeeset.min.css">
这样，reeeset 就会自动被应用于你的项目中。
- 将 reeeset 作为样式表的一部分
使用此方法时，需要在你的项目中新建一个样式文件，文件名为 reset.css 或其他具有辨识度的名称。
在样式表中引入 reeeset，可以使用以下代码：
@import "~reeeset/reeeset.min.css"; // node_modules 中的路径需要加 "~"
然后，将该样式表与项目中的其他样式表一起引入即可实现样式标准化。
示范代码及运行效果
以下是一个使用 reeeset 的示例代码，你可以将此代码复制保存为一个 HTML 文件，并在浏览器中打开该文件，查看运行效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- -- ---------------
----- ---------------- --------------------------------------------
-------
---- -
----------------- -----
------- --
-------- --
-
--- --- --- --- --- -- -
---------- -----
------------ -------
-
-- -
------------ ----
----------- -----
-------- --
-
--------- -
-------- -- --
------ ----
-
--------
-------
------
-------- -- - ------- ------
-------- -- - ------- ------
-------- -- - ------- ------
-------- -- - ------- ------
-------- -- - ------- ------
-------- -- - ------- ------
----
-------- ------
----
---- -
----
------- ---- ------
------- ---- ------
-----
-----
-------- ------
-----
-------
-------运行效果如下图所示：
通过上面的代码示例，我们可以看到，使用 reeeset 进行样式重置或标准化，可以快速地消除浏览器之间的差异，让网页的样式更加统一一致。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067011e361a36e0bce8d87