在前端开发中，我们经常需要使用 CSS 来美化网页或应用程序的外观。然而，在大型项目中，CSS 文件的大小可能会非常大，从而导致加载速度变慢，影响用户体验。为了缩小 CSS 文件的大小，我们可以使用 PostCSS 工具来自动化优化 CSS 文件。
PostCSS 是一个基于 JavaScript 的工具，它可以将 CSS 解析成抽象语法树（AST），并允许我们编写插件操作 AST。其中一个很有用的插件是 postcss-discard-overridden，它可以删除被覆盖的规则并减小最终生成的 CSS 文件的大小。下面是该插件的使用教程：
安装和配置
首先，你需要安装 postcss-discard-overridden 插件。你可以在终端或命令行窗口中输入以下命令进行安装：
npm install postcss-discard-overridden --save-dev
接下来，你需要在 PostCSS 配置文件中添加插件。在这个例子中，我们将使用 postcss.config.js 文件。如果你还没有创建该文件，请创建它并添加以下代码：
module.exports = {
plugins: [
require('postcss-discard-overridden')
]
}现在，我们已经成功地安装和配置了 postcss-discard-overridden 插件。
使用示例
假设我们有以下 CSS 规则：
-- -------------------- ---- ------- ---- - ------ ---- - -- - ------ ----- - -- - ------ ---- -
通过使用 postcss-discard-overridden 插件，我们可以删除被覆盖的规则。在这个例子中，我们可以删除 body 选择器下的规则，因为它被后面的 h2 选择器覆盖了。同样，我们也可以删除 h1 选择器下的规则，因为它被后面的 h2 选择器覆盖了。最终，我们将得到以下 CSS：
h2 {
color: red;
}要使用 postcss-discard-overridden 插件，请按照以下步骤操作：
在项目目录下创建一个名为 .postcssrc.js 的文件，并添加以下配置：
module.exports = { plugins: { 'postcss-discard-overridden': {} } }在命令行窗口中输入以下命令：
npx postcss input.css -o output.css
其中，input.css 是你的 CSS 文件路径，output.css 是输出文件路径。如果你不指定输出文件路径，则输出文件将覆盖原始文件。
指导意义
postcss-discard-overridden 插件可以帮助我们缩小 CSS 文件的大小，提高页面加载速度和用户体验。然而，它并不是万能的解决方案，它只会删除被覆盖的规则，而不会进行其他优化。
因此，在使用该插件时，我们应该注意以下几点：
- 仅在开发环境中使用该插件，不要将其用于生产环境；
- 确保你的 CSS 文件遵循最佳实践，例如尽可能使用简洁的选择器和属性；
- 使用其他 PostCSS 插件来进一步优化你的 CSS 文件，例如 Autoprefixer、cssnano 等。
结论
通过使用 postcss-discard-overridden 插件，我们可以轻松删除被覆盖的 CSS 规则，并缩小最终生成的 CSS 文件的大小。在实际项目中，这可以帮助我们提高页面加载速度和用户体验。然而，我们应该注意该插件的局限性，并尝试结合其他 PostCSS 插件来优化我们的 CSS 文件
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46703