在前端开发中，我们经常会遇到各种浏览器对样式的默认处理不一致的情况。为了确保页面的样式呈现达到一致的效果，在项目中使用 CSS Reset 是一个常见的解决方案。
CSS Reset 的作用是将浏览器的 CSS 样式重置为统一的基础样式。但是在实践中，有些 CSS Reset 的写法会导致副作用甚至更糟糕的问题。本文将介绍 CSS Reset 的最佳实践与最坏实践，并给出具体的指导和示例代码。
CSS Reset 的最佳实践
选择合适的 CSS Reset
在选择 CSS Reset 时，一定要根据项目的需求来选择适合自己的 Reset。目前比较流行的 CSS Reset 有 Normalize.css 和 Reset.css 两种。
Normalize.css 是目前比较流行的 CSS Reset ，它可以在保留有用的浏览器默认样式的基础上，修复浏览器之间的样式差异，达到更高质量的样式重置。例如在重置表单元素样式时，保留默认的表单元素样式需要使用下面的样式：
------- ------ ------- -------- - ----------------- ------------ ------- ----- ----- -------- ------- -- -------- -- -
Reset.css 则是一种更彻底的 CSS Reset，它直接把所有元素的默认样式都置成空，需要你重新定义所有元素的样式。这种 Reset 更适合你需要完全控制每个元素的样式，比如在写一些复杂的 UI 组件时。
在样式文件的最开始引入 CSS Reset
将 CSS Reset 放在样式文件的最开始是一种最佳实践。这样可以确保重要样式的覆盖不会像在 Reset 之后写样式那样频繁、复杂。示例：
--------- ----- ----- ---------- ------ ----- ---------------- ----------------------- ----- ---------------- --------------------- ----- ---------------- ------------------ ------- ------ --------- ----------- ------- -------
CSS Reset 的最坏实践
过于粗暴的 Reset
有些 CSS Reset 会直接将所有元素的默认样式都修改或删除。这种写法看似方便，但实际上会导致许多不必要的问题。
例如，以下 CSS 代码是一个过于粗暴的 Reset。
- - ------- -- -------- -- -
这段代码会将所有元素的 margin 和 padding 都置为 0，导致您需要手动添加 margin 和 padding 的代码在一些元素上。
未考虑浏览器的默认样式
在实践中，有些 Reset 对浏览器默认样式缺乏考虑。这样往往会导致一些奇怪的问题。
例如，以下 CSS Reset 在处理图片标签时没有考虑到图片标签在一些浏览器的默认样式，可能会导致一些问题：
--- - ------- ----- -
这段代码如果在某些浏览器中使用，会将图片标签的默认样式移除掉，导致图片无法正常显示。
结论
在选择 CSS Reset 时，我们应该综合考虑项目本身和实现效果，选择适合自己的 Reset；将 Reset 放在样式文件的最开始，以避免复杂问题；同时避免过于粗暴的 Reset 和未考虑浏览器默认样式问题，确保样式的正确性。
在实践中，使用 Normalize.css 是一个比较好的选择，它能修复浏览器之间的样式差异，减少不必要的问题。当你写一些复杂的 UI 组件时，可以考虑使用 Reset.css。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670cc9f45f551281025ba9f7