CSS Reset 是指一种“重置”浏览器自带的 CSS 样式表的方法，主要的目的是消除浏览器之间的差异，使得所有浏览器渲染出的页面基本一致。然而，CSS Reset 也会带来一些样式上的问题，如字体大小、排版等方面。本文将介绍如何优雅地处理这些问题。
问题
在使用 CSS Reset 之后，页面中的所有样式都被清空，如下图所示：
// javascriptcn.com 代码示例
/* reset.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
}
...
可以看到，虽然页面的排版被重置了，但是其他的样式也跟着被清空了，包括字体大小、颜色等。接下来我们将针对这些问题逐一解决。
字体大小问题
在 CSS Reset 之后，页面的字体大小被设置为了 16px，但如果我们在实际使用中需要应用不同大小的字体，就需要重新定义字体大小。一个常见的方法是将字体大小定义为使用者自定义的 CSS 变量：
// javascriptcn.com 代码示例
:root {
--font-size-base: 16px;
}
body {
font-size: var(--font-size-base);
}
h1 {
font-size: calc(var(--font-size-base) * 2);
}
...这样可以保证基础字体大小的一致性，同时又不会影响到其他元素的大小。如果需要在某一个元素中重新定义字体大小，只需要使用 calc() 函数即可。例如上述代码中 h1 元素中字体大小将会是基础字体大小的两倍。
排版问题
在 CSS Reset 之后，页面的排版被重置了，但是排版的细节需要重新设计和设置。一个常见的问题是，浏览器默认的行高可能不符合预期，需要重新设置行高。
body {
font-size: var(--font-size-base);
line-height: 1.5;
}
...在上述代码中，我们定义了一个行高为 1.5 的基础样式，并将其应用于 body 元素。
定义颜色
在 CSS Reset 之后，颜色也被清空了，需要重新定义。我们可以在 :root 中定义自己的颜色变量：
:root {
--color-primary: #007cff;
--color-secondary: #f2f2f2;
}
...定义好颜色以后，在其他样式中就可以使用自定义的颜色变量，而不是直接写死颜色编码，这样可以使得调整颜色变得更加方便。
button {
background-color: var(--color-primary);
color: var(--color-secondary);
}
...总结
本文介绍了如何优雅地处理 CSS Reset 带来的样式问题，主要包括字体大小、排版、颜色定义。总的来说，CSS Reset 可以在消除浏览器差异的同时，增加开发者的灵活性和可维护性，是开发中不可或缺的一部分。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652a0efc7d4982a6ebc6c05d