在PostCSS官网上有这样的介绍PostCSS的特性。箭头后面是对应功能的插件及其github地址。提高代码可读性→Autoprefixer今天就使用明天的CSS！→postcss-cssnext全局CSS结束→postcss-modules避免你的CSS出错→stylelint强大的网格CSS→丢失→丢失autoprefixer、cssnext和CSSModules等插件。上面列出的特性都是由相应的postcss插件实现的。要使用PostCSS，您需要将其与webpack或parcel结合使用。Parcel中使用PostCSS的方法：添加配置文件.postcssrc(JSON)、.postcssrc.js或postcss.config.js。以.postcssrc文件为例：{"modules":true,"plugins":{"autoprefixer":{"grid":true}}}Plugins被指定为plugins对象中的键，选项使用定义对象的价值。如果插件没有选项，只需将其设置为true。接下来我会根据官方readme的demo一一介绍各个插件，并补充一些插件背后隐藏的知识点的讲解。1.什么是Autoprefixer？首先明确Autoprefixer是一个PostCSS插件，根据caniuse解析css，并为其添加浏览器厂商前缀。没有任何供应商前缀的通常写法。::placeholder{color:gray;}Autoprefixer将根据当前浏览器支持使用功能和属性数据为您添加前缀。可以试试Autoprefixer的demo：http://autoprefixer.github.io/从上图可以看出，Autoprefixer将不支持已经完全符合W3C标准的css2.1属性display、position等没有浏览器差异。添加前缀，css3属性transform会为其添加前缀，其中--webkit是chrome和safari的前缀，--ms是ie的前缀，像firefox已经实现了transform的W3C标准化，所以使用transform是Can。因此，Autoprefixer是一款非常好用的前端开发加速工具，但需要基于PostCSS才能发挥作用。如果你对venderprefix有疑问，可以阅读我的博客：rem/VenderPrefix/CSSextensions2。什么是postcss-cssnext？postcss-cssnext语法输入：:root{--fontSize:1rem;--主色：#12345678；--centered:{显示:flex;对齐项目：居中；证明内容：居中；};}body{颜色：var(--mainColor);字体大小：var(--fontSize)；行高:calc(var(--fontSize)*1.5);padding:calc((var(--fontSize)/2)+1px);}.centered{@apply--centered;}浏览器可用语法output:body{color:rgba(18,52,86,0.47059);字体大小：16px；字体大小：1rem；行高：24px；行高：1.5rem；padding:calc(0.5rem+1px);}.centered{display:-webkit-box;显示：-ms-flexbox；显示：弹性；-webkit-box-align：居中；-ms-flex-align:居中；对齐项目：居中；-webkit-box-pack：中心；-ms-flex-pack：中心；justify-content:center;}粗略看了下demo，http://cssnext.io/playground/，感觉既好用又不好用。有用的是使用var()和calc()来计算css属性的值，还有@apply等规则的写法，也可以用来理解一些新的cssdraft特性；不好用有一定的学习成本，前期需要一定时间结合webpack、gulp、parcel，如果有前端新人加入，一定要掌握cssnext的语法。这样做，似乎是想把css变成一种可以进行逻辑处理的语言，但我个人认为，对于像css这种需要具体思考，需要有一定的灵活性的语言，在工作中使用cssnext并不是一个好的方式。很多debug的选择，但可以作为工作之余学习新的CSS草稿特性的入口，待纳入标准后使用。一开始对自己的想法没有把握，就去看看前辈们的想法。其中，顾铁岭对cssnext的想法和我的如出一辙：CSS转译器（transpiler），按照目前还处于草案阶段，还没有被浏览器实现的标准，将代码翻译成符合当前浏览器实现的CSS。类似于ES6的Babel。相比之下，Autoprefixer更有实用价值，以后浏览器如何实现cssnext实现的功能还是个疑问，感觉只能玩玩了。3.什么是postcss-modules？在看postcss-modules之前，首先要弄清楚CSSModules的概念。关于CSSModules，可以看我翻译的一篇文章：【翻译】什么是CSSModules？为什么我们需要它们？postcss-modules是CSSModules在PostCSS上的实现插件。这里有介绍postcss-modules的插件作者写的一篇文章：PostCSS-modules:makeCSSgreatagain!。在我有限的开发经验中，我只在react中使用过cssmodules，在vue和angularjs中没有使用过，而且在react中使用时，我不会使用postcss-modules插件，而是使用react-css-modules插件-在CSSModules中考虑反应。下面给出最简单的入门示例：在React的上下文中，CSS模块可能会这样写：importReactfrom'react';importstylesfrom'./table.css';exportdefaultclassTableextendsReact.Component{render(){return
