如何从您的网站中删除未使用的 CSS？

介绍

在开发网站时，我们通常会使用许多 CSS 样式和框架。然而，随着时间的推移，您可能添加了多个 CSS 文件或样式表，而有些样式可能已经过时或无用。这些无用的 CSS 代码会影响网站的性能，并增加下载时间，因此需要删除它们。

本文将介绍如何检测和删除网站中未使用的 CSS。

检测未使用的 CSS

为了检测未使用的 CSS，我们需要使用一些工具。以下是一些流行的工具：

• PurifyCSS
• uncss
• UnusedCSS
• CSS Auditor

在本文中，我们将使用 PurifyCSS。它是一个非常流行的工具，可以快速检测和删除未使用的 CSS。

使用 PurifyCSS

要使用 PurifyCSS，您需要安装 Node.js。安装完成后，打开终端并输入以下命令：

npm install -g purify-css

接下来，在终端中转到您的网站根目录，并运行以下命令：

purifycss *.html --css style.css --min

这将检测所有 .html 文件中使用的 CSS 类，并创建一个新的 CSS 文件，其中包含仅用于这些类的样式。

请注意，您需要在命令中更改样式表的名称。此命令将根据您网站中使用的样式和 HTML 文件生成新的 CSS 文件，同时完全删除未使用的样式。

删除未使用的 CSS

完成上述步骤后，我们需要将新生成的 CSS 文件重命名为原始样式表的名称，并将其上传到服务器。在这之后，您可以使用浏览器的开发者工具检测网站上的任何未使用的 CSS。

您还可以使用其他一些工具来检测未使用的 CSS。例如，可以使用 Chrome 开发者工具中的 Coverage 选项卡来查看您的网站上未使用的 CSS。使用此选项卡可以轻松地找到未使用的 CSS，然后将其删除。

总结

本文介绍了如何检测和删除网站中未使用的 CSS。通过使用 PurifyCSS 和其他一些工具，可以轻松地检测并删除无用的样式，并提高网站的性能和速度。