前端-原创-《PostCss》

【一】概念理解

官方定义：是一个用 JavaScript 工具和插件转换 CSS 代码的工具

PostCSS 的主要功能只有两个：第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构（Abstract Syntax Tree，AST），第二个就是调用插件来处理 AST 并得到结果。
PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 Webpack、Grunt 和 Gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置。
【二】常用插件介绍
1，Autoprefixer
首先明确一点Autoprefixer是一个根据can i use解析css并且为其添加浏览器厂商前缀的PostCSS插件。
不加任何vender prefix的通常写法。
::placeholder {
color: gray;
}
Autoprefixer将使用基于当前浏览器支持的特性和属性数据去为你添加前缀。你可以尝试下Autoprefixer的demo：http://autoprefixer.github.io/

由上图可以看出，像没有浏览器差异已经完全符合W3C标准的css2.1属性display，position等，Autoprefixer不会为其加前缀，而像css3属性transform就会为其加前缀，其中–webkit是chrome和safari前缀，–ms则是ie的前缀，像firefox由于已经实现了对transform的W3C标准化，因此使用transform即可。
因此Autoprefixer是一个非常有用的加速前端开发的一个工具，但是它需要基于PostCSS去发挥作用。
2，stylelint
强制开发人员按照团队css规范写css样式的工具，类似eslint。
若想使用，只需要去启用规则即可。

参考：
https://www.postcss.com.cn/
https://www.cnblogs.com/mengfangui/p/8932915.html
https://segmentfault.com/a/1190000014782560