[分享]css删除未使用的规则

在一个复杂的网站项目中，往往会出现大量 CSS 规则。这些规则可能来自于多个样式表，或者在一个较长时间段内多人维护代码导致了冗余规则的存在。如何删除未使用的规则，以保证网站样式的规范和性能的优化，成为...

在一个复杂的网站项目中，往往会出现大量 CSS 规则。这些规则可能来自于多个样式表，或者在一个较长时间段内多人维护代码导致了冗余规则的存在。如何删除未使用的规则，以保证网站样式的规范和性能的优化，成为优秀前端工程师必须具备的技能之一。

我们今天要聊的就是如何使用 CSS 去删除未使用的规则。

/* 要删除的冗余规则 */
.button {
  color: red;
  font-size: 16px;
  text-transform: uppercase;
}

/* 实际使用的规则 */
.button {
  color: blue;
}

/* CSS 消除法 */
/* 添加一个使用了类名样式 */
.button-used {
  color: blue;
}

/* 通过 JavaScript 去添加类名样式，或者调用一个类名样式 */
document.querySelector('.button').classList.add('button-used'); 

我们在所有使用到这个规则的页面的相关位置将原有的样式类名修改为 button-used，然后在原有的样式表中删除了 button 的 CSS 规则。

除此之外，还有一些自动化工具可以帮助你删除未使用的 CSS 规则，如 PurgeCSS、UnCSS 和 Clean-CSS。这些工具都可以通过对项目根目录下的主 HTML 文件进行分析后，自动生成新的 CSS 文件，其中只包含尽可能多的已使用的样式规则。这样做可以在一定程度上减小 CSS 文件的大小，提高页面的加载速度，并且保证了 CSS 的可读性。

总体来说，删除未使用的 CSS 规则对于网站性能和可维护性都至关重要。无论是手动删除还是使用工具，前端工程师们都应该时刻保持删除冗余代码的心态，优化网站的性能和减少维护成本。