标签：
市面上已经有很多的前端工具，再来引入新的前端工具，价值大不大？这主要取决于，它是否给开发人员提供了新的功能，是否值得花时间和精力去学习和使用？
PostCSS出现时有一个很有趣的现象。像sass和less这些主要做css预处理的工具，已经有了它们的类别和使用方法的区别。
让我们先解决一些PostCSS常见的认识误区，这样可以看出它是如何提高你的工作效率，改善你的css编码工作的。
提示：如果你想了解PostCSS是什么及如何安装使用它，请看《PostCSS简介》,然后再回来看这篇文章。
先从PostCSS里最容易误解的点说起。
PostCSS发布时，它被定义和划分为一个“后处理器”。PostCSS插件开始就是使用有效的CSS，并通过各种插件对其进行扩展和处理，不像其它一些预处理器那样，需要特定语法和编译，才可以得到有效的CSS。
说PostCSS是一个后处理器，也是一种误导的。准确的说应该称它为CSS处理器，PostCSS使用插件，在CSS生成过程中，执行了多个任务对CSS代码进行处理。
PostCSS的一些插件，也和SASS这些预处理器一样定制了自己的语法，并通过编译把代码转化成有效的CSS。像PostCSS Nested插件，定义了选择器嵌套的语法，其作用和SASS和LESS实现的嵌套相同。其它一些PostCSS插件都是处理有效的CSS，并通过扩展它，去完成样式工作的。其中比较有名的插件Autoprefixer，它会在传入的CSS中，自动为一些样式添加浏览器前缀，然后生成最终的CSS。
还有一些PostCSS插件，并不处理CSS代码，它只会查看CSS代码。如：Stylelint会去检测CSS，还有像Colorguard会保持CSS中所有颜色值格式一致。
除了上面说的，PostCSS还可以编译SASS和LESS的源文件，输出标准的CSS。可以通过PostCSS插件，来处理和扩展名为.scss的SASS文件。更详细的下面第2条会说。
纠正第1个认识误区：PostCSS，即不是预处理也不是后处理。它是一个CSS处理器，可以在工作中，扩展和测试CSS样式代码。
开发者一个常见的误解是，PostCSS是另一个像SASS和LESS的预处理器。
相信很多人使用PostCSS插件，会把注意力放到模仿其它预处理特性上，如变量，条件语句，循环和混入。随着PostCSS的发展，许多其他功能的插件被开发出来，有许多完全和传统的预处理器不同的新特性被引入。
你可以把PostCSS，当成像SASS和LESS这样的预处理器使用，你也可以用一些像SASS,LESS的扩展，来升级你的工具集。
PostCSS能够解析CSS和SCSS语法，这样你可以使用PostCSS插件来，保持你原来的编码风格。例如，在当前项目中，我可以使用PostCSS的Stylelint插件，在编译之前就去检测你的SCSS代码。产生的CSS代码，通过Autoprefixer和postcss-assets去添加浏览器前缀和行内图片的dataurl。
工作流程如下图：
当然最后，你是否选择使用PostCSS决定权在你。如果你只把它当成预处理器使用，也可以。但想让SASS和LESS这样的预处理工具，具备上面那样新的特性，它们是做不到的。
前端的工具已经够多的，为什么还要添加一个进来，使工具更复杂呢？这样思考是对的，但你要看你的项目是否需要。
你可能在不知道的情况下，已经使用了PostCSS。如果你使用过Autoprefixer为CSS添加浏览器前缀，可能你已经使用它了。Autoprefixer是一个PostCSS插件，可以在构建工具的任务中使用，如grunt和gulp工具对应的grunt-postcss和gulp-postcss插件。也可以在其它一些构建工具中使用，如Webpack，更多使用方法，请查询PostCSS文档。
当在你的项目中，用没有使用postcss插件的方式，使用了Autoprefixer，我建议你使用它。这样可以让你，在使用其它PostCSS插件时，更容易，结构也更清晰。
举个例子，如果你在Gulp构建工具中使用Autoprefixer，你的gulpfile.js里的代码应该像下面这样：
return gulp.src( [‘/**/*.css‘] ) // PostCSS tasks to be run on our CSS files .pipe( postcss([ autoprefixer({ browsers: [ ‘> 5%‘, ‘last 2 versions‘, ‘ie > 7‘ ] }) // Autoprefixes CSS properties for various browsers … // any other PostCSS plugins to be run can be added in here]) ) .pipe( gulp.dest( CSS_DEST_PATH ) );
如果要添加插件，可以像Autoprefixer一样，放到这个数组里。
如果你的项目用不上Autoprefixer插件，那么可以到postcss.parts上，看看有没有什么可用的插件。
每个项目和团队需要的插件都是不同的，可以根据自己的情况进行选择。
把PostCSS集成到你的程序中，不比添加grunt和gulp插件难。PostCSS是一个独立的构建过程，如果可以改善你的CSS工作，那么就不要省略这个构建过程。
这个误区的直接原因是，PostCSS插件模仿了SASS的功能，直接拿PostCSS和SASS,LESS相比。
在过去的12个月，PostCSS已经添加了许多新的工具。为你提供丰富的插件可供选择。
如果你觉得PostCSS只有提供了简单的预处理功能，并且坚持使用现在用着的预处理器，我觉得你可以多了解一下。像Stylelint，PostCSS Stats和doiuse，还有其它许多插件，如：可以为你提供自动化的CSS报告的插件。你之前用的工具是做不到。
PostCSS还提供了一些优化功能，如SVG和CSS minificationg，还提供了比混入更好的解决方案--为样式添加回调函数。
更重要的一点，PostCSS才刚刚起步。随着不断发展，会有更多的插件，用来解决CSS相关的问题。查看有哪些用得上的插件，可以在postcss.parts上找一找。
总之，PostCSS提供了许多预处理器无法完成的功能。可以花点时间想想，怎样做可以更容易扩展你的工具集。
PostCSS是一款功能强大的CSS处理工具，可以提高前端开发人员的工作效率。它会变成越来越完善的工具，并能高效地解决常见的CSS样式，预处理和书写问题。
如果你之前已经知道PostCSS，但出于一些原因没有使用它，那么建议你再详细了解一下，这个可以大大提高前端工作效率的工具。
原文：PostCSS Mythbusting: Four PostCSS Myths Busted
原文链接：http://www.sitepoint.com/postcss-mythbusting/
标签：
原文地址：http://www.cnblogs.com/wengxuesong/p/5466969.html
