在前端开发中，我们经常需要添加 CSS Reset 来规范样式表，但是经常会遇到一些常见的问题。本文将会介绍这些问题并提供解决方法，让你的代码更简洁和规范。
问题一：CSS Reset 太过冗长
CSS Reset 的目的是消除浏览器的默认样式，但有些 Reset 太过冗长，导致代码繁琐。例如下面的 CSS Reset：
-- -------------------- ---- ------- ---------------------------------------- ----------------------------------- ------------------------------------- -------------------------------- ---------------------------------------- ------------- ------------------ --------------------------- --------------------------------------------------------------------------------------------------------------------- ------------------- ---------------------- ------------------------- ---------------------------------------------------------------------------- ----------------- --------------------------------- ---------------------------------------- ------------------- ------------------------------------------------ --------------------------------------------------- ------ -----------------------------------
这段代码包含了绝大多数 HTML 元素的样式重置，但也太过冗长。有没有更简洁的 Reset 呢？答案是有的。
推荐使用 normalize.css，这是一款很简洁的 CSS Reset。它只消除了浏览器样式的一部分，但也已经足够使用了。
<link rel="stylesheet" href="normalize.css">
如果你需要更多的规则，可以自己编写一个简洁的 Reset。
问题二：CSS Reset 影响其他组件
有些 CSS Reset 可能影响到其他组件的样式。例如，某个 Reset 可能会使得所有的图片不可见，因为它将所有元素的 padding 和 margin 都设为了 0。
解决这个问题的方法就是避免过度使用 Reset。白板样式是很好的示例，不需要使用 Reset。
另外，如果你必须使用 Reset，可以将其包装在一个类中，然后将该类应用于你需要重置样式的元素中。
-- -------------------- ---- ------- -- ----- --- -- --------- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
<div class="clearfix"> ... </div>
这样可以避免 Reset 影响其他组件的样式。
问题三：CSS Reset 和自定义样式冲突
有些时候，你可能已经添加了自定义的 CSS 样式，但是当你添加 Reset 时，样式会冲突。解决这个问题的方法很简单，只需要将 Reset 放在自定义样式之前即可。
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="custom.css">
问题四： CSS Reset 过度清除浮动
清除浮动时，有些 Reset 可能会过度清除浮动，导致布局出现问题。解决这个问题的方法是使用 Clearfix Hack。
-- -------------------- ---- ------- ------------------ ---------------- - -------- --- -------- ------ - ---------------- - ------ ----- - --------- - ------ -- -
这种方法可以解决大多数的清除浮动问题。
结论
使用 CSS Reset 可以帮助我们规范前端样式表，但也需注意问题。我们可以使用更简洁的 Reset，避免过度使用 Reset，将 Reset 放在自定义样式之前，以及使用 Clearfix Hack 来解决清除浮动问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6742c266572305489db8e36c