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

您网站的 CSS 文件有时会变得非常大。这主要发生在您构建新类而不删除您现在已停止使用的旧类的情况下，这使得 CSS 文件非常混乱，其他贡献者难以理解和修改。

如果您使用 WordPress 的预构建主题，也会发生这种情况。在这里，我们将了解如何以合理的比例减小 CSS 文件大小。有一些工具可用于删除未使用的 CSS。在这里，我们将使用PurifyCSS 。

先决条件：

• 您将需要安装 Node，它将用于执行代码。下载并安装 Node，它将包括内置的包管理器 NPM。
• 您还需要任何文本编辑器，如果没有，请尝试使用 Visual Studio Code。

了解 PurifyCSS 的工作原理： PurifyCSS 通过一系列 CSS 文件获取所有 HTML 文件。这意味着我们不能只提供我们的index.html文件，因为我们可能会通过我们网站上的一系列模板呈现不同的 HTML 文件。 HTML 文件列表将检查提供的 CSS 文件，例如style.css和custom.css 。在您的情况下，它可能会有所不同，只要想想您的哪些文件使用相同的 CSS 文件。然后将通过 CSS 文件检查类似的页面。如果不这样做，那么我们最终可能会丢失所需的 CSS 文件。

安装 PurifyCSS：安装 Node 并访问它的包管理器 NPM。 PurifyCSS 有一个内置的 NPM 包用于安装，通过在项目文件夹根目录下的终端中运行以下命令来安装它：

npm i -D purify-css

准备我们的文件：我们将需要一些 HTML 文件以及它们的 CSS 文件。在我们的例子中，我们假设 CSS 的主要部分在style.css文件中。

在我们的根目录中，我们为要处理的每个 HTML 布局创建一个 HTML 文件：

• 主页
• 实践
• 比赛
• 实习
• 轮廓
• 工作

创建与我们网站匹配的模板文件后，只需将它们复制并粘贴到我们在目录中创建的新文件中即可。然后我们对 CSS 文件做同样的事情。

净化工具的根目录如下所示：

• 节点模块/
• 练习.html
• 比赛.html
• 索引.html
• 实习.html
• profile.html
• 工作.html
• 样式.css

创建 JavaScript Purifier：现在，在根目录中创建一个新的 .js 文件，例如purifyMyCSS.js。将以下 JavaScript 代码添加到文件中。

const purify = require("purify-css")
  
// Reference of all HTML files from root directory
let content = ['*.html'];
  
// Reference of all CSS files from root directory
let css = ['*.css'];
  
let files = {
  
    // Write purified CSS into a file
    output: 'purified.css',
    minified: true, // Minify boolean
    info: true  // Output information
};
  
purify(content, css, files, function (purifiedAndMinifiedResult) {
    console.log(purifiedAndMinifiedResult);
});

这对于 PurifyCSS 的工作来说已经足够了。现在只需使用 Node.js 运行代码。

净化：完成上述步骤后，可以在根目录级别的终端中运行以下代码来删除未使用的 CSS：

node purifyMyCss.js

就是这样，您将获得类似于以下内容的输出：

现在您将获得一个名为purified.css 的新CSS 文件，只需复制该文件的内容并将它们粘贴到您网站的CSS 文件中即可。

概括：
PurifyCSS 从我们的文件中减少了大约 70% 的未使用 CSS，如果你有一个像 GeeksforGeeks 这样的大型网站，这是相当多的。但是，如果您有一个单页网站，则无需执行所有这些步骤。您可以使用各种免费的在线工具。其中之一是 UNCSS，它允许您在一个输入中粘贴 HTML 内容，在另一个输入中粘贴 CSS 内容。点击按钮，您缩短的 CSS 将附加到输出框中，将其复制并粘贴到您想要的位置。