前言
在前端开发中，CSS 是必不可少的一个部分，并且随着前端工具链的发展，CSS 方面也变得越来越复杂。随着 PostCSS 的逐渐普及，我们可以对 CSS 进行更加自动化的处理。其中，postcss-plugin-initial 插件是一个非常好用的插件，它主要可以帮助我们设置 CSS 属性的初始值。今天，我们就来讲一下如何使用 postcss-plugin-initial 插件。
基础概念
在 CSS 中，有一些属性，它们在默认情况下都有一个初始值。例如 display 属性默认的值是 inline，font-size 属性默认的值是 medium 等等。而有一些属性则没有默认的值，例如 background-color。这就意味着，如果我们不去设置定义出来的属性值，那么它的值就是 undefined。但是，在某些情况下，我们希望属性有一个统一的初始值。这时候，postcss-plugin-initial 插件就可以派上用场了。
安装
在安装 postcss-plugin-initial 插件之前，我们需要先安装 PostCSS。如果你已经安装了 PostCSS，那么我们可以直接通过 npm 安装 postcss-plugin-initial插件：
npm install postcss-plugin-initial --save-dev
使用
安装完成以后，我们需要在项目的 postcss.config.js 文件中引入插件并配置：
module.exports = {
plugins: [
require('postcss-plugin-initial')({
reset: 'all' // 重置所有属性
})
]
}接着，我们就可以在项目中愉快地使用 postcss-plugin-initial 了。例如，在我们的 CSS 文件中，我们可以写下如下代码：
.box {
display: flex;
align-items: center;
}在使用 postcss-plugin-initial 插件之前，我们需要手动的给属性设置默认值。很多情况下，我们需要设置多次才能达到相应的效果，如下所示：
-- -------------------- ---- ------- ---- - -------- ------- ---------- ----- ------------ ---- ----------------- ------------ ------- ----- ------- -- -------- -- -
如果使用了 postcss-plugin-initial 插件，我们可以直接这样写：
.box {
initial: all;
display: flex;
align-items: center;
}这样我们就省去了定义值的步骤，大大提高了生产力。initial 还有一个可选参数： inherited。它表示希望从父元素继承。比如：
.box {
initial: all;
color: inherit;
font-size: inherit;
}这里我们使用关键字 inherit 来让事情变得简单。
总结
本文主要介绍了 postcss-plugin-initial 插件的用法和详细解释了其使用场景。postcss-plugin-initial 插件可以极大地提高团队协作效率，降低 CSS 维护成本。希望这篇文章可以对你学习 PostCSS 有所帮助。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731781e8991b448e94d0