在编写前端页面时，我们经常使用 CSS Reset 对页面默认样式进行重置，这有助于提高浏览器兼容性和统一页面样式。然而，在进行 CSS Reset 的同时，往往我们需要维护一些原有的样式，以满足实际需求，这就需要我们在兼容 CSS Reset 的前提下，有针对性地维护好原有样式。
本文将介绍如何在兼容 CSS Reset 的前提下，维护好原有样式，并通过实际示例代码进行详细说明。本文适合初级前端开发人员和有一定经验的前端开发人员阅读。
1. 选择合适的 CSS Reset
首先，在兼容 CSS Reset 的前提下，我们需要选择合适的 CSS Reset。通常来说，我们可以选择一些比较知名的 CSS Reset，如 Normalize.css、Reset.css 等。这些 CSS Reset 会对浏览器的默认样式进行重置，包括字体大小、行高、边框、背景等样式，以便于我们在页面开发中更好地控制样式。
下面以使用 Normalize.css 为例，介绍如何在兼容 CSS Reset 的前提下，维护原有样式。
2. 维护原有样式
在使用 CSS Reset 进行样式重置后，我们需要针对性地维护原有样式。具体操作如下：
2.1 重置元素样式
在使用 CSS Reset 重置了页面元素样式后，我们需要针对性地对元素样式进行重新定义。比如说，Normalize.css 会将所有的元素 box-sizing 属性设置为 border-box，这可能导致一些元素样式错乱。此时，我们可以重新定义这些元素的 box-sizing 属性，以达到修复错乱的目的。
示例代码：
-- -------------------- ---- ------- ---- - ----------- ----------- - -- --------- ------- - ----------- -------- - ----------------------- ------------------- - ----------- ----------- -展开代码
2.2 重置字体样式
在使用 CSS Reset 重置了字体样式后，我们需要针对性地对字体样式进行重新定义。Normalize.css 会将所有文本元素的字体大小和行高取消，并将字体设为 sans-serif，这样会导致页面样式混乱，无法满足我们的需求。此时，我们可以重新定义字体样式，以达到自定义的字体样式效果。
示例代码：
-- -------------------- ---- ------- ---- - ---------- ----- - ---- - ------------ ------ ---- --------- ---- ---------- ------- ---------- ------ ---------- ------ ----------- ---------- ----- ------------ ---- -展开代码
2.3 重置文本样式
在使用 CSS Reset 重置了文本样式后，我们需要针对性地对文本样式进行重新定义。比如说，Normalize.css 会将 h1~`h6` 元素的样式取消，这导致页面中的标题元素无法正常显示。此时，我们可以重新定义标题元素的样式，以达到恢复标题元素样式的效果。
示例代码：
-- -------------------- ---- ------- --- --- --- --- --- -- - ---------- ------- ------- -------- - ------- ------------ ----- ------------ ---- ------------ --------- ------ ----------- ------ ----- -展开代码
2.4 重置表单样式
在使用 CSS Reset 重置了表单样式后，我们需要针对性地对表单样式进行重新定义。比如说，Normalize.css 会将表单元素的 border-radius 和 box-shadow 取消，这导致表单元素无法使用圆角边框和阴影效果。此时，我们可以重新定义表单元素的样式，以达到使用圆角边框和阴影效果的效果。
示例代码：
-- -------------------- ---- ------- ------------------- -------------------- -------- - ---------- ----- ------------ ---- -------- ---- ----- -------------- ---- ------- --- ----- -------- ----------- ----- - ----------------------- ------------------- - --------------- ------- -展开代码
结语
本文介绍了如何在兼容 CSS Reset 的前提下，维护好原有样式，并通过实际示例代码进行了详细说明。希望本文能对前端开发人员的开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6780abeace7f486125445a02
