在前端开发中，CSS Reset 是一个经常被使用到的技术，它能够帮助我们重置浏览器默认样式的设置，使我们在开发网页时更加的灵活。但是，初学者在使用 CSS Reset 时常常会犯一些误区，导致调试大量的样式、调整 UI 界面的布局效果，进而造成前端开发效率低下的问题。那么，这篇文章就将会介绍 CSS Reset 的 5 个常见误区，帮助读者更好的理解并使用 CSS Reset 技术。
误区 1：不适合自己的项目
许多初学者看到 CSS Reset 的神奇，就会在每个项目中使用它。但是，事实上 CSS Reset 并不适合所有的项目。有些项目正是源于浏览器默认样式的精细处理，若直接使用 CSS Reset 会失去很多细节。因此，在使用 CSS Reset 前，应该先对项目进行分析，明确需要使用 CSS Reset 的目的、作用及影响，才能选择是否使用 CSS Reset 技术。
误区 2：全局应用
CSS Reset 应该仅应用于你的 UI 组件，并不是应该全局使用的。这个误区在某些 CSS Reset 库中如 normalize.css 常常会犯，应该避免对全局进行样式的覆盖。如果一个 CSS Reset 库正在全局应用到你的项目中，那么它应该仅仅包含样式覆盖，而不是整个样式库。正确的使用方式是为你的 UI 组件制定样式覆盖，并使用不同的 CSS 类将它们组合起来。
例如，normalize.css 在一些 CSS 规则中覆盖了 h1 标签的样式，假设你想使用自定义的 h1 样式，则不应该覆盖全局样式，而是对目标 h1 元素使用自定义类名：
---- -- - -- - --- --- ---- ------------- --- -- - -------- ------ ---------- ---- ----------- ------- -------------- ------- ------------ -- ------------- -- ------------ ----- - -- --- -- ---------- - ---------- ---- ------ ----- ------------ ------- -
误区 3：缺失关键重置样式
在使用 CSS Reset 的时候，通常需要特别细心地学习 CSS Reset 的所有样式覆盖规则。一些初学者可能没有理解到所有方面的样式管辖权，导致关键的样式未被重置覆盖，如 font-size、font-family、line-height 和 margin 等重要的样式定义。必须确保这些关键样式被正确地覆盖。
误区 4：未考虑继承样式
CSS Reset 通常需要在局部 UI 组件中进行使用，但是有时候局部组件中某些样式是继承自祖先元素的，这也会影响到真正想要重置的目标样式。例如，一个 div 容器中包含一个 p 元素，假设你想要重置 p 中文本样式，但是你并没有清楚地了解每个元素的默认样式，因此你未考虑到 p 其实已经继承了周围容器 div 中的一些样式。这个问题的解决方案是更精细地使用 CSS 类，每个组件都应该有独立的类名。
-- -- -- - - ------- -- ---------- ----- ------------ ---- - -- -- -- ---------- - - ------- -- ---------- ----- ------------ ---- -
误区 5：使用 CSS Reset 的完全副本而不是替代
虽然常常需要对浏览器默认样式进行样式的修正，但对于某些 CSS Reset 库而言，有一些与项目类型不匹配或与个人编程风格不符合的内容，所以我们并不需要完全将 CSS Reset 库的样式全部复制到我们的项目中来。正确的做法是仔细看一看库中的代码，寻找有什么库中的代码可以继承的格式，而不是仅仅直接复制整个 CSS Reset 库到自己的项目中。
结论
无论是 CSS Reset、Normalize，还是使用自定义的 CSS 类，每个前端开发人员都应该了解它们的应用场景，以便使用它们的同时可以更好地发挥它们的之优势，避免以上所提到的误区。这篇文章中介绍的五个常见的 CSS Reset 误区，当仔细思考时，都不难解决。因此，每个前端开发人员都应该学会如何正确使用 CSS Reset 技术，提高项目效率和创建响应式布局的速度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/671dd45a9babaf620fb86020