前言
为了兼容不同浏览器的差异，前端开发者通常会使用 CSS Reset 库，以便在不同的浏览器中展示出一致的页面效果。但是，CSS Reset 也存在一些缺陷，本文将介绍这些缺陷并提供相应的解决方法。
CSS Reset 的缺陷
样式丢失
CSS Reset 会重置默认的浏览器样式，但也会导致一些有用的样式被丢失。例如，button 元素的 background-color 和 border 样式，以及 textarea 元素的 resize 样式等。
兼容性问题
CSS Reset 本意是为了兼容不同的浏览器，在某些情况下却可能产生兼容性问题。例如，某些浏览器会自动给 input 元素添加默认的 padding 样式，如果使用了 CSS Reset，这些样式就会被重置，导致页面显示不正常。
不易维护
CSS Reset 常常以一段复杂的 CSS 代码形式出现在页面的顶部，这样一来，代码量越大，维护难度就越大，可读性也会变差。
解决方法
借鉴 Normalize.css
Normalize.css 是一个广受欢迎的 CSS Reset 库，它主要解决了样式丢失和兼容性问题，并且使用了简洁明了的代码结构，易于维护。借鉴 Normalize.css 的做法，我们可以选择只重置必要的样式，避免不必要的样式丢失。
-- ---- ----- --------- ------ --
- -
----------- -----------
------- --
-------- --
-
---- -
------------ ------ -----------
---------- -----
------------ ----
-
-- --- --------- ------ --
------- ------ ------- -------- -
----------------- ------------
------- -----
-
----------------------- ------------------- -
------- --
-
-------- -
------- ---------
-避免使用过多的样式
有时候，我们在使用 Bootstrap 或类似框架的时候，会使用大量的样式，这样容易导致页面样式混乱，难以维护。为了避免这样的情况，我们应该尽量减少不必要的样式，只保留必要的样式，并且尽量将样式写在组件内部，避免全局样式的混乱。
将样式分解为独立的组件
现代前端框架通常会将页面分解为独立的组件，每个组件都有自己的样式和行为。这种方式可以更好地组织代码，方便维护和重用。
---- --------- - ---
---- ---------------------
------- ------------------------------ ---------------
------- ---------------------------------- ---------------
------
---- --------- - ---
---- -------------
---- ------------------------------------
--------------
--------------
-------- --------- - --
------------- -
-------- -----
---------------- -------
---- -----
-
--------------- -
----------------- -----
------ ------
-------- ---- -----
-------------- ----
-
----------------- -
----------------- -----
------ ------
-------- ---- -----
-------------- ----
-
-- --------- - --
----- -
-------- -----
--------------- -------
------------ -------
------- --- ----- ------
-------- -----
-------------- -----
-
----- --- -
------ -----
------- -----
-------------- -----
-
----- -- -
----------- -----
---------- -----
----------- -------
-
----- - -
----------- -----
---------- -----
----------- -------
-结论
CSS Reset 是一个有用的工具，但也存在一些缺陷，我们应该根据具体的情况选择最合适的解决方案。借鉴 Normalize.css 的做法，只重置必要的样式，并尽可能将样式分解为独立的组件，这样可以更好地组织代码，方便维护和重用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6729f990ddd3a70eb6ced70e