问题描述
在进行前端项目开发时，通常我们会使用 CSS Reset 来规范化各个浏览器对 HTML 元素的默认样式，以便我们能够更好地进行样式设计和布局。常见的 CSS Reset 有 Normalize.css、Reset.css 等。但是，在导入外部样式表时，可能会发现 CSS Reset 的效果无法生效，导致我们需要手动修复各个样式属性。这将极大地浪费我们的时间和精力，给项目开发带来不必要的困难。
问题原因
CSS Reset 的效果无法生效，原因在于导入顺序的影响。在导入样式表时，最后导入的样式表会覆盖之前所有导入的样式，因此如果最后导入的样式表中也定义了和 CSS Reset 相同的样式规则，就会导致 CSS Reset 无法生效。例如：
---- ---------- ---
--------- -----
----- -------------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
-----------------------
----- ---------------- ---------------- --
----- ---------------- ---------------- --
-------
------
--------- ----------
-------
--------- --------- -- -- - ------- -- -------- -- - -- --------- -- -- - ---------- ----- -
如果我们将 CSS Reset 导入到了 reset.css 中，并在 index.css 中定义了和 reset.css 相同的样式规则，就会导致 CSS Reset 的效果无法生效。此时，<h1>元素会被设置了字体大小，但不会被设置边距和内边距。
解决方案
解决上述问题，有以下几种方案可供选择：
方案一：合并文件
一种简单的解决方案是将 CSS Reset 和业务样式合并到同一个文件中，并且保证 CSS Reset 在样式表的最开始被引用，这样就可以避免样式覆盖的问题。例如：
---- ---------- ---
--------- -----
----- -------------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
-----------------------
----- ---------------- ----------------- --
-------
------
--------- ----------
-------
--------- ---------- -- -- - ------- -- -------- -- ---------- ----- -
方案二：使用样式优先级
另外一种解决方案是使用样式优先级，让 CSS Reset 的样式优先级高于我们编写的业务样式，从而让 CSS Reset 的效果生效。例如：
---- ---------- ---
--------- -----
----- -------------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----- ---------------------------- ----------------- --
-----------------------
----- ---------------- ---------------- --
----- ---------------- ---------------- --
-------
------
--------- ----------
-------
--------- --------- -- -- - ------- - ----------- -------- - ----------- - -- --------- -- -- - ---------- ----- -
在 reset.css 中，我们加上了 !important 标记，这样就可以让样式优先级高于 index.css 中的样式，从而让 CSS Reset 的效果生效。
结论
综上所述，我们在导入外部样式表时需注意样式覆盖的问题，可以选择合并样式表或使用样式优先级来解决问题。在项目开发中，我们应合理地应用 CSS Reset，进行样式规范化，提升开发效率并提高代码的可维护性和可扩展性。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6718b3aead1e889fe22da354