什么是 CSS Reset？
CSS Reset 是通过一系列的 CSS 样式重置，将 HTML 标签的默认样式清空，从而达到在不同浏览器下统一不同元素的默认样式的目的。最早的 CSS Reset 是由 Eric Meyer 于 200 Eric Meyer 创建了一份现在广为使用的 CSS Reset 样式表，这份样式表被广泛使用，成为了 Web 前端开发的标准实践之一。
CSS Reset 的作用
- 清除浏览器默认样式，避免不同浏览器的默认样式不一致，使页面在不同浏览器中保持一致的展现效果。
- 初始化 CSS 属性，消除不同标签之间的样式差异，减少样式修复工作的复杂度。
- 统一样式表达，减少样式冗余。
CSS Reset 的优缺点
优点：
- 统一不同标签的默认样式，使页面在不同浏览器中保持一致的展现效果。
- 初始化 CSS 属性，减少样式修复工作的复杂度和工作量。
- 减少样式冗余，优化页面性能。
缺点：
- CSS Reset 会在一定程度上破坏浏览器原有的样式，导致一些样式在不同的浏览器中表现不同，开发者需要花费额外的精力处理这些问题。
- 相比于现代化的浏览器，对于过时的浏览器 CSS Reset 可能效果不尽如人意。
现代前端开发中是否需要使用 CSS Reset？
随着浏览器的发展，HTML 和 CSS 规范逐步完善，CSS Reset 逐渐变得不是那么必要了。在现代前端开发中，一些框架如 Bootstrap、Materialize 和 Semantic UI 等都会提供一些自己的 CSS Reset，而这些 CSS Reset 更加符合现代化的 Web 标准，并且解决了一些使用传统 CSS Reset 会出现的一些问题。
另外，一些前端开发者也不再使用 CSS Reset，而是采用预处理器或者 CSS 框架来实现 CSS 初始化。
如何实现 CSS Reset？
以下是一份较为简单的 CSS Reset：
-- -------------------- ---- -------
-- ----- ------- ------ --
-----
--- --- --- --- --- ---
-- ----------- ----
--- --- --- ---
-------
------
--------- ------ -
------- --
-------- --
-
-- ---- ---- -------------- ---------- --
---- -
------------ --
-
-- ------ ---- ----- --
--- -- -
----------- -----
-
-- ------ --------- ---- ---- --
- -
---------------- -----
-
-- ------ ------ ---- --- --
--- -
------- -----
-该 CSS Reset 主要清空了 HTML 元素的默认样式，以保持页面的一致性。
结论
在现代前端开发中，CSS Reset 不是那么必要了。如果你使用了现代化的 CSS 框架，不需要再使用 CSS Reset；如果你没有使用任何 CSS 框架，也可以考虑采用预处理器来实现 CSS 初始化。但无论你采取何种方案，清除默认值、初始化 CSS 属性和减少样式冗余的原则始终是重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66edbf66bc9e1890c5e3e86b