什么是 CSS Reset
在前端开发中，有一个非常重要的概念叫做 CSS Reset。当我们开始编写页面时，由于不同的浏览器对 HTML 和 CSS 的默认渲染方式不同，往往会导致页面出现很多奇怪的差异，因此我们需要一些方法来消除这些差异，让页面在不同的浏览器中表现基本一致。CSS Reset 就是为了解决这个问题而出现的。
CSS Reset 的基本思路就是在页面渲染之前，清除掉浏览器默认的样式，然后再自行设置一些基本的样式。
CSS Reset 的问题
但是随着前端技术的发展，CSS Reset 也出现了一些问题。在使用 CSS Reset 时，我们常常会遇到以下问题：
过于极端
某些 Reset 方案会清除掉大部分的默认样式，导致页面完全没有样式，需要重新手动添加很多基本样式，冗余代码大大增加，反而不利于开发效率。
破坏样式继承关系
如果我们在某个组件中定义了一些样式，但是在 Reset 后，这些定义就失效了，导致组件样式不符合我们的预期。例如一些全站统一样式，在 Reset 后可能失效，这对于项目的一致性也会带来负面影响。
微生态
CSS Reset 通常是一个单独的文件或者一段代码，使用时往往需要进行一些修改，这样就会产生很多个性化的 Reset 方案，导致代码的“微生态”现象，不利于维护。
设计系统解决方案
针对 CSS Reset 所存在的问题，我们可以选择一种更好的方案：设计系统。设计系统是一种以用户为中心的设计方法，目的是提高设计的效率和一致性，并能够快速实现设计想法。
在设计系统的基础上，我们可以实现以下方案：
保留重要默认样式
在设计系统中，我们可以保留默认的样式，但是只保留一些比较重要的样式，例如表单样式、文本样式等等。这样可以保证页面在不同浏览器中的呈现效果比较一致，同时也可以避免一些不必要的冗余代码。
采用样式继承的方式
在设计系统中，我们可以将一些样式定义为组件的基本样式，然后在具体的组件样式中进行继承。这样可以避免样式丢失，同时也可以提高组件的复用性。
配置化
在设计系统中，我们可以使用配置化的方式来实现样式的定义和管理。这样可以避免微生态现象，提高代码的可维护性和可扩展性。
示例代码
下面是一个简单的设计系统示例代码：
-- -------------------- ---- ------- -- --------- --- ------- ------ -- ------- ------ --------- ------- -------- - ------- -- -------- -- ---------- ----- ------ -------- ----------- ----- ------- ----- - -- ------ --- ------ --------- ----- -- ------- - -------- ------------ ------------ ------- ---------------- ------- ------- ----- -------- - ----- ------------ ----- -------------- ---- ----------- - --- --- ------- -- -- ----- ----------- --- --- ------------------------ - -- ------ --- ------- ------ ------- -- ---------------- - ----------------- -------- ------ ----- - -- ------ --- --------- ------ ------- -- ------------------ - ----------------- ----- ------ -------- ------- --- ----- -------- -
可以看到，我们在样式中定义了一个 button 组件，以及两个不同的 button 变体，分别是 primary 和 secondary。我们使用了 normalize 的方式来重置了一些默认样式，然后在设计系统中定义了一些基本样式，以及不同变体的样式，并使用继承的方式来保证样式的正确继承和复用。
总结
CSS Reset 是解决前端开发问题的一种方便但是有缺点的方案，而通过设计系统，我们可以实现基于组件的灵活，可扩展和可维护的样式定义与调用，处理更好这些问题。设计系统相对于 Reset 方案在过程中需要时间、人力以及设计思想的提高，但作为最终可维护的系统解决方案而言，是值得花费精力去实现的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648969ef48841e98947b2f88