作为前端开发中重要的一环， CSS Reset 旨在消除浏览器默认样式，为整个页面提供一个相对一致的基础样式。然而，传统的 CSS Reset 往往是“打了一片空白”，并且往往需要大量的代码来处理细节问题。为了避免这些问题，现在出现了一种新的 CSS Reset 技术：渐进式 CSS Reset。
什么是渐进式 CSS Reset？
渐进式 CSS Reset 是指在不打断现有代码基础上，对 CSS 样式进行逐步扩展的技术。它将 CSS 样式分为多个层次，在每个层次上逐渐重置、重置样式以及添加新的样式。这个过程是逐步进行的，因此也不用担心将一开始的样式全部清空造成的负担。
优点
与传统的 CSS Reset 相比，渐进式 CSS Reset 具有以下三个优点：
方便的升级
传统的 CSS Reset 一旦应用到项目中，难以升级，因为他的变动可能会影响大量现有代码。然而，渐进式 CSS Reset 可以逐级升级每个样式层级，不会对项目造成太大的冲击。
减少冗余代码
传统 CSS Reset 往往包含了所有可能的 CSS 属性值重置，使得代码量过多冗余。而渐进式 CSS Reset 可以在每个层次上只添加必要的属性值，减少冗余代码。
更好的可维护性
在渐进式 CSS Reset 中，每个层次的样式可以针对需要修改，而不会影响其他部分，提高可维护性。
示例代码
以下是基于渐进式 CSS Reset 的示例代码：
-- -------------------- ---- ------- ---- - ----------- ----------- ---------- ----- - -- ---------- -------- - ----------- -------- - ---- - ------- -- ------------ ------ ----------- ---------- ----- ------------ ---- ----------------- -------- ------ ----- -
在上面的代码中，我们将 CSS 样式分为三个层次。在第一层次中，我们设置了 box-sizing 和 font-size 的默认值。在第二层次中，我们设置了 * 元素及其伪元素的 box-sizing 属性。在第三层次中，我们设置了常用的 body 元素样式。这个样式就足以满足大多数需求，而且不会对现有样式造成太多影响。
结论
渐进式 CSS Reset 技术是一种更加高效、灵活、可维护的 CSS Reset 方法。在实际项目中，我们可以根据需求逐步增加样式层次，以达到最佳的效果。同时，这种技术也能减少冗余代码，保证项目的可维护性和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f64db7c5c563ced5820b24