[翻译]纠正PostCSS的4大认识误区

市面上已经有很多的前端工具，再来引入新的前端工具，价值大不大？这主要取决于，它是否给开发人员提供了新的功能，是否值得花时间和精力去学习和使用？

PostCSS出现时有一个很有趣的现象。像sass和less这些主要做css预处理的工具，已经有了它们的类别和使用方法的区别。

让我们先解决一些PostCSS常见的认识误区，这样可以看出它是如何提高你的工作效率，改善你的css编码工作的。

提示：如果你想了解PostCSS是什么及如何安装使用它，请看《PostCSS简介》,然后再回来看这篇文章。

误区1-把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样式代码。

误区2-PostCSS是另一个像SASS和LESS的预处理器

开发者一个常见的误解是，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这样的预处理工具，具备上面那样新的特性，它们是做不到的。

误区3-PostCSS会使构建工具更复杂

前端的工具已经够多的，为什么还要添加一个进来，使工具更复杂呢？这样思考是对的，但你要看你的项目是否需要。

你可能在不知道的情况下，已经使用了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工作，那么就不要省略这个构建过程。

误区4-PostCSS没有比其它预处理器有更多的功能

这个误区的直接原因是，PostCSS插件模仿了SASS的功能，直接拿PostCSS和SASS,LESS相比。

在过去的12个月，PostCSS已经添加了许多新的工具。为你提供丰富的插件可供选择。

如果你觉得PostCSS只有提供了简单的预处理功能，并且坚持使用现在用着的预处理器，我觉得你可以多了解一下。像Stylelint，PostCSS Stats和doiuse，还有其它许多插件，如：可以为你提供自动化的CSS报告的插件。你之前用的工具是做不到。

PostCSS还提供了一些优化功能，如SVG和CSS minificationg，还提供了比混入更好的解决方案--为样式添加回调函数。

如果你想试试CSS模块，PostCSS也提供了相应的插件。

更重要的一点，PostCSS才刚刚起步。随着不断发展，会有更多的插件，用来解决CSS相关的问题。查看有哪些用得上的插件，可以在postcss.parts上找一找。

总之，PostCSS提供了许多预处理器无法完成的功能。可以花点时间想想，怎样做可以更容易扩展你的工具集。

总结

PostCSS是一款功能强大的CSS处理工具，可以提高前端开发人员的工作效率。它会变成越来越完善的工具，并能高效地解决常见的CSS样式，预处理和书写问题。

如果你之前已经知道PostCSS，但出于一些原因没有使用它，那么建议你再详细了解一下，这个可以大大提高前端工作效率的工具。

原文：PostCSS Mythbusting: Four PostCSS Myths Busted

原文链接：http://www.sitepoint.com/postcss-mythbusting/