背景
在前端开发过程中，每个浏览器都有默认的css样式，这些默认样式可能在不同浏览器中具有不同的差异，导致样式的不一致。为了避免这种情况的发生，需要重置浏览器的默认样式。这就是CSS Reset的作用。
在实际开发中，我们经常会使用外观模式来封装一些UI组件，比如弹窗、对话框、菜单等，以让它们在使用时更加方便和易于维护。但是，当使用外观模式封装UI组件时，CSS Reset可能会破坏外观模式的结构，因为重置后的样式可能会覆盖外观模式的定义，导致样式与预期不符。
解决方案
为了解决这个问题，我们需要做一些优化。
1、选择性重置样式
我们不需要重置所有的样式，可以选择仅仅重置需要的样式。比如，我们可以仅仅重置标签的默认样式，不去重置外观模式中定义的样式。
下面是一个例子：
----- ----- --- --- --- --- --- --- --- --- --- --- --- --- ---- ----- ----- --------- ------- ------ --------- -- ----------- --- --- ------- --- --- -
------- --
-------- --
-2、使用类区分
为了让外观模式的样式不被CSS Reset覆盖，我们可以给外观模式添加一个class，然后再重置默认样式。这样，只有带有该class的元素会被外观模式的样式所影响，从而保证了外观模式的完整性。
下面是一个例子：
-- --- ----- --
----- ----- --- --- --- --- --- --- --- --- --- --- --- --- ---- ----- ----- --------- ------- ------ --------- -- ----------- --- --- ------- --- --- -
------- --
-------- --
-
-- ------- ------ --- --
------ -
----------------- -----
------- --- ----- -----
-------- -----
-
------ ------ -
---------- -----
------------ -----
-------------- -----
-3、使用Normalize.css
另外，我们还可以使用Normalize.css来代替CSS Reset。Normalize.css是一个完整的CSS Reset解决方案，它不仅重置浏览器的默认样式，还修复了一些常见的样式差异。在使用Normalize.css时，外观模式的样式不会被覆盖。
结论
在使用外观模式封装UI组件时，CSS Reset可能会破坏外观模式的结构。为了保证外观模式的完整性，我们可以采用选择性重置样式、使用类区分或者使用Normalize.css的方案来避免这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fbb7964471362601610ab4