在开发前端页面的过程中，我们经常会遇到样式冲突与重定义的问题，这在大型项目中往往更为严重。为了避免这些问题，我们通常会使用 CSS Reset。
什么是 CSS Reset？
CSS Reset 是一种重置样式表的方法，它通过在页面加载之前删除浏览器默认样式，并提供统一的基本样式，以达到避免样式冲突和重定义的效果。
常见的 CSS Reset 方法包括 Eric Meyer’s Reset CSS 和 Normalize.css 等。
CSS Reset 的好处
使用 CSS Reset 的好处在于可以确保网站在不同浏览器上的样式表现基本一致，而且可以避免样式冲突的问题，提高开发效率。
在大型项目中，特别是多人协作开发时，使用 CSS Reset 可以避免样式表现不一致的问题，同时可以方便其他开发人员快速了解项目的样式规范和使用方式。
如何使用 CSS Reset？
使用 CSS Reset 很简单，只需要在项目中引入相应的 CSS 文件即可。我们以 Normalize.css 为例：
<link rel="stylesheet" href="normalize.css">
在引入 CSS Reset 之后，我们还需要注意以下问题：
1. 重新定义基本样式
虽然 CSS Reset 可以帮助我们避免浏览器默认样式对页面造成的影响，但是它并不会对所有样式进行定义。
因此，在进行样式编写时，我们需要重新定义一些基本样式，例如全局字体、间距等。我们可以新建一个 global.css 文件，并将基本样式进行定义：
-- -------------------- ---- ------- ---- - ------------ ------ ----------- ---------- ----- ------------ ---- ------ ----- - --- --- --- --- --- -- - -------------- ------ ------------ ----- - - - -------------- ---- -
2. 避免重定义已有的样式
在使用 CSS Reset 时，我们需要注意避免重定义已有的样式。
例如， Normalize.css 已经将 a 标签的样式定义为蓝色，而且已经给 a:hover 定义了下划线效果，因此，在我们自己编写样式时，应该避免重新定义这些样式：
-- -------------------- ---- ------- -- ----- -- - - ------ ---- ---------------- ----- - -- ----- -- ----- - ------ ---- ---------------- ----- -
3. 使用标准化的命名规范
在使用 CSS Reset 的同时，我们还应该使用标准化的命名规范，例如 BEM 等，以避免重定义和样式冲突的问题。这些命名规范可以让我们更好地组织和管理 CSS 样式，方便团队协作。
结论
使用 CSS Reset 可以避免样式冲突与重定义的问题，确保页面在不同浏览器上的表现一致性，提高开发效率。在使用 CSS Reset 时，我们应该注意重新定义基本样式、避免重定义已有的样式，以及使用标准化的命名规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6716509ead1e889fe21bf80e