每一个Coder都应了解到底什么是PostCSS【译】

我最近在一些工做流当中采用了PostCSS —— Meteor工做流、简单的React和Webpack工做流。我知道我必须得去使用它，由于全部人都很兴奋地去用，并且它也确实从没让我失望过。你将会看到一些我还没不太知道PostCSS是什么以前的一些想法。

这里是你可能有的一些对PostCSS的想法：

1. 你可能以为它是个预处理器替代品
2. 你可能感受很难把它加进如今的工做流
3. 你可能并不知道本身已经在使用它，经过Autoprefixer插件
4. 你可能以为本身并不须要它

我尽力一条条阐述清楚。这些仅仅是我我的的观点，固然，确定也有不少人和我想法相似。

你可能以为它是个预处理器替代品

固然它不是，PostCSS是一个使用特殊附加语法读取你的CSS代码，再处理它最后返回普通CSS代码的JavaScript工具。那这对你来讲有什么意义？意义就是你仍是能够用喜欢的预处理器，你也能够在这些预处理器没效果的地方使用PostCSS，好比检测、添加前缀和CSS4的特性。意味这你能以PostCSS plugin的形式去写一些逻辑，它会按你让它作的去作。你能够在这里postcss.part找到许多为PostCSS提供的插件，可是PostCSS最强大的地方是你能够为它编写你本身的自定义插件。这点很牛由于这很模块化。请看一下官方文档plugin development documentation。

只用记住它不是一个预处理器替代品，尽管你想让它去替代它确实也能。有个很好的例子，看一下PreCSS Plugin的包，这就是一个不少PostCSS Plugin构成的工具集合，它能替代你的Sass预处理器。

习惯了使用Sass或者Stylus，你仍是能使用它，预处理以后你仍是能用PostCSS的插件去处理它。

你可能感受很难把它加进如今的工做流

你可能在使用一些构建工具，好比Gulp、Grunt、webpack。若是这样，你只用安装合适的插件就行。你将会找到和它相关的Grunt tasks、Gulp tasks，和Webpack loaders。

它很是模块化和灵活，你只要选择本身真正须要的插件，你不用像安装预处理器同样安装全部的功能。

你可能并不知道本身已经在使用它，经过Autoprefixer插件

有趣的是不少人一直都在用Autoprefixer但他们并不知道，事实上，这个场景下他们用的是PostCSS。Autoprefixer就是一个PostCSS插件，负责拿到你的CSS，检查它的浏览器兼容性，添加特定的必要的头部给你的CSS声明。这是一个很好的例子说明PostCSS plugins在作什么。

有几个预处理器插件实现了Autoprefixer，最经常使用的是autoprefixer-stylus和less-plugin-autoprefix 。他们只是在底层利用了PostCSS和Autoprefixer plugin。

你可能以为本身并不须要它

有一些人以为本身只用Sass和Stylus就够了，我能理解他们，由于确实一些状况下这就足够了。可是，让我看看一些状况下咱们的预处理器并不能知足需求。

第一，Autoprefixer 插件的例子。

第二，Stylelint。Stylelint是一个很是棒的PostCSS插件，提供了对CSS检测的工具，和不少配置项。

第三，Lost Grid System。Lost Grid System是一个很棒的栅格系统，被写成了一个PostCSS插件。

最后一个例子是CSSNext。使用这个PostCSS插件，你能够用未来的CSS4语法。

当咱们谈论PostCSS的时候，咱们在谈论什么

当咱们在说PostCSS的时候，咱们可能在交替地讨论如下两种状况：

1. PostCSS自己，你能够运行npm install postcss会获得的
2. PostCSS这个工具支持的插件体系

这个工具自己是一个NodeJs模块，将CSS解析成AST(抽象语法树)，传递这个AST给一些插件内的方法，最后再将它转回字符串，你就能够将它输出到文件中。AST通过的函数可能会也可能不会转化它，同时source-map会生成以跟踪任何的改变。

AST提供了一个很简单直接的Api，开发者能用它来开发plugin。好比，你能够经过css.eachRule()用到每个设置进文件规则，或者经过rule.eachDecl()拿到每个声明，经过rule.selector获取规则集，经过atRule.name获取规则名称。你会发现，PostCSS让你很容易去操做CSS源码。

PostCSS能够为各类阅读和操做你的CSS的插件提供强大的支持。

记住一点，PostCSS自己和它的插件体系，都不和Sass和Less有直接相似的地方。可是，将一些相关的将用户友好stylesheets转化成浏览器友好stylesheets的插件绑定在一块儿，它们就有了和预处理器类似的做用。

可是也请记住，这些插件体系的补充内容。没有哪一个插件或包是或者能表明PostCSS。

---

本文翻译自 julian.io/some-things… 和 davidtheclark.com/its-time-fo…