[翻譯]糾正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/