在前端开发中，我们经常需要对网页样式进行定制化。为了兼容各种浏览器，在开始样式设计前，我们通常先对基础样式进行重置，以避免浏览器默认样式对我们的样式设计产生干扰。一个经典的方式就是使用“CSS Reset”的方法，但使用 CSS Reset 会存在一些问题，例如可能会影响语义化标签的样式等。因此，本文将介绍另一个替代方案——Normalize.css，并详细解释如何使用它进行样式规范化。
什么是 Normalize.css
Normalize.css 是一款开源的 CSS 样式表，主要目的是解决不同浏览器之间的样式差异问题，同时确保样式能尽可能地匹配 W3C 规范。与传统的 CSS Reset 不同，Normalize.css 更注重保留语义化标签的默认样式，同时增强 HTML5 元素的一些样式表现力。
使用 Normalize.css
安装 Normalize.css
由于 Normalize.css 是一个开源的库，我们可以通过引入 CDN 或通过 npm 安装来使用。
CDN 引入方式：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
npm 安装方式：
在终端运行以下命令安装：
npm install normalize.css --save
Import Normalize.css 到你的项目中：
import 'normalize.css';
下载 Normalize.css
你也可以直接访问 github，通过下载后处理后，再引入到自己的项目中使用。
使用 Normalize.css
若我们直接进行测试，使用 Normalize.css 后的样式与我们一开始重置之后相比，让我们的页面看起来更加统一和一致。除此之外，Normalize.css 还会自动为我们提供一些样式表，如下所示：
-- -------------------- ---- ------- --- - --------- ------------- - --- -- -- ---- - ------------ ----- ------------------------- ----- - ---- - ------- -- - -------- ------ ------- ------- ---- ------- - -------- ------ - -- - ---------- ---- ------- ------ -- - ----------- ------- ---- - -- - -- -------- ------ - --- - --------- ------------- - --- -- --
需要注意的是，Normalize.css 不是用于排版的，而是为用户界面和基础设计提供了一些良好的默认值和样式。
减少代码冗余
事实上，我们在项目中可能不需要使用到 Normalize.css 提供的全部样式。因此，我们可以在初始化时选择一些我们希望开启的功能，避免代码冗余。值得注意的是，在进行这一操作前，我们需要先进行一些必要的设置。
有一种方式是使用 postcss-normalize 插件，将 Normalize.css 中的样式集成到我们的 CSS 中。具体操作可以参考 https://github.com/csstools/postcss-normalize
另一种方式是使用 npm 安装时，通过向 Normalize.css 传递选项（以配置文件的方式），定义我们需要的样式的列表，如下所示：
import 'normalize.css/normalize.css';
在这次引入时，我们将使用 normalize.css 目录下的 normalize.css 样式，而它所定义的内容均是常规的重置浏览器默认样式的 CSS 代码，和 reset.css 类似。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------- ------------
----- ---------------- ------------------------------------------------------------------------------- --
-------
---- -
------------ ------ ---------- ------ ---------- -----------
-
---- -
------ ------
------- ------
------- - -----
----------------- -----
------ -----
----------- -------
------------ ------
-
--------
-------
------
---- --------------------- ----------
-------
-------总结
尽管使用 CSS reset 是一个传统的方式，但 Normalize.css 更加适合现代前端开发的需求，保留了浏览器默认的样式，同时增强了 HTML5 的语义化样式表现。尤其在移动端，Normalize.css 更能避免一些不必要的样式处理，加强了网站的可访问性和可维护性。因此，我们建议我们在前端开发中使用 Normalize.css 代替传统的 CSS Reset，从而避免一些不必要的问题，为项目带来更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64956d6748841e989429c1ff