標籤：

各位前端大神能不能通俗的說一下PostCSS到底能做什麼？對於手寫css的優勢在哪？

01-14

PostCSS 就是 CSS 界的 Babel。

它們本身只做兩件事：

  1. 把源代碼（或者符合一定條件的擴展語法）解析為一個自帶遍歷訪問、節點操作介面的樹；
  2. 把語法樹輸出為代碼字元串。

主要的功能，都由插件提供，在第一步完成以後，這棵樹以及上面的節點會由一個個插件依次進行處理。插件可以做很多事，比如：

  • 識別一些瀏覽器尚未支持的語法，轉換為瀏覽器支持的（Autoprefixer、cssnext）；
  • 在不破壞解析的前提下在一定程度上擴展語法，提供私有的語法糖；
  • 識別出源碼中不符合編碼規範之處，輸出結果來給 linter 顯示（Stylelint）；
  • 找到並去除冗餘代碼、將代碼壓縮為等價且更短的寫法（cssnano）；
  • ...

和手寫 CSS 相比，主要優勢很簡單：寫出更短、更標準、更容易維護的代碼。

簡單點講，PostCSS是CSS的處理器。如果你以前使用過CSS的預處理器的話，比如Sass、LESS或者說Stylus。這幾個是使用預編碼來處理CSS，然後編譯成線上需要使用的CSS。而PostCSS剛好相反，他是處理你寫好的CSS，讓你的CSS更健康。可以用一張圖來簡單的描述：

上圖也告訴我們，在這個過程中有很多插件。這些插件就是PostCSS的插件，而且這些插件都是使用JavaScript寫的。言外之意，你可以使用JavaScript基於PostCSS核心的Core上編寫任何你想要的一款功能的插件。也因為這個原因，PostCSS的插件生態圈非常的強大，最常見的就是Autoprefixer、cssnext之類的。當然還有其他的，這也是PostCSS能在社區迅速發展狀大的原因之一。我自己很多時候常把PostCSS的插件生態看作是NPM的生態。這個時候你想想就知道了。

有了PostCSS，我們並不需要拋棄以前所熟悉的Sass或LESS之類的，你的開發模式可以這樣：

我自己也是這樣的一個開發模式，使用Sass先編譯成CSS，然後通過PostCSS對編譯好的 CSS做優化處理。讓自己的代碼更為健康。當然你也可以直接自己基於PostCSS定製一款適合你自己的預處理器。

簡單總結一下：

PostCSS不是什麼

  • 儘管表面上它看起來是一個預處理器，其實它不是一個預處理器
  • 儘管表面上它看起來是一個後處理器，其實它也不是一個後處理器
  • 儘管它可以促進、支持未來的語法，其實它不是未來語法
  • 儘管它可以提供清理、優化代碼這樣的功能，其實它不是清理、優化代碼的工具
  • 它不是任何一件事情，這也意味者它潛力無限，你可以根據自己的需要配置你需要的功能

PostCSS特別之處

  • 多樣化的功能插件，創建了一個生態的插件系統
  • 根據你需要的特性進行模塊化
  • 快速編譯
  • 創建自己的插件，且具可訪問性
  • 可以像普通的CSS一樣使用它
  • 不依賴於任何預處理器就具備創建一個庫的能力
  • 可以與許多流行工具構建無縫部署

它的插件生態系統提供不同的功能

像PostCSS本身一樣令人驚奇的是，它有很多不同的插件，這也是讓PostCSS發光之處。當你看到PostCSS在GitHub上的可用插件列表，你會發現其具有各式各樣的功能。

模塊化

另一方面，PostCSS具有很可用的插件，你可以根據自己所需儘可能使用多的選擇或儘可能少選擇。

如果僅想用PostCSS讓CSS是更有效率和讓瀏覽器更友好的話，載入一些優化插件，你就可以閃人了。

如果僅想用PostCSS作為預處理器的話，使用一些語言擴展插件就OK。

PostCSS的基本原理是粒子化，模塊化。簡而言之，沒有處理多個功能的笨重插件。相反，每創建一個插件，就是一個功能。

可以創建任何自己想要的插件

PostCSS是用JavaScript編寫的插件，這樣只要能編寫JavaScript的就可以創建一個自己想要的插件，達到自己的目的。值得慶幸的是，就算你不是專業的JavaScript開發人員，但使用PostCSS開發插件也就只需要短短的幾個小時，就可以開發出一個全功能的插件。

你可以像使用CSS一樣使用PostCSS

大多數PostCSS插件不需要使用自定義的語法，其實它就是典型的預處理器。相反，它們可以應用常規的CSS語法。這也意味著，你可以使用PostCSS就像是使用CSS一樣。比如說，你要完成一個前端框架，你完全可以使用別人項目中的文件，例如Normalize.css文件。

PostCSS庫不會綁定到一個處理器上

雖然過去他們可能一直使用Stylus、Sass或LESS來編寫一個庫，但我們也開始看到有人通過PostCSS來創建整個庫。

上面是我所知道的一些關於PostCSS的東東。國外有一個系列專門介紹PostCSS：PostCSS Deep Dive: Shortcuts and Shorthand中文：PostCSS_入門 精通 教程_w3cplus 而且互聯網上這方面的教程也非常的多：https://www.google.com/#newwindow=1safe=activeq=postcss+tutorial

另外有一本書專門介紹PostCSS：

這是一本英文書，聽說中文版本很快要上架了。如果喜歡的話，可以關注一下。

希望上述回答能幫你解惑！

官方的解釋已經很通俗了，只不過是拿英文說的，這些功能也就是它的優勢…

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.…

一些對於人來說重複繁瑣的事情讓後處理器幫你做了，例如PostCSS最典型的場景是autoprefixer，你只用寫標準的CSS屬性，自動給你加上-webkit-,-moz-這些。另外可以在CSS實現babel的效果，讓你現在就可以嘗鮮一些CSS next的語法

如果你的項目都是自己的私人小項目 那麼跟手寫css比沒有任何優勢 。

如果是團隊作戰的大項目，工具的優勢就體現出來了 ，科學化的管理代碼會給團隊節省大量的時間。

直接的好處就像各位大神所說 就是不用一個一個加前綴了，但前綴這玩意也就是這幾年瀏覽器標準還沒有定型的時候會用到，以後應該也不會有什麼前綴之類的了，

我的建議是，初學者把精力花在學習css知識本身，至於這些亂七八糟的工具，等你到了公司跟大家一起用就行了，用不著本末倒置的學工具。

當然，如果你硬要學，也是好的，畢竟技多不壓身。但如果你本身該學的都沒學好，就被這些五花八門的工具困擾著，你的心理負擔會很重，也許會耽誤了你吸取真正知識的機會。 總之看你個人了，你覺得好玩你就學，你覺得難受就不要學，畢竟這東西其實沒有你想的那麼重要，因為到了公司你該用什麼自然就會用了。

作為一名前端工程師是有必要學一款CSS處理工具的，這也是個人能力的體現，可以把它放到你學習CSS的最後階段。

說到這裡我突然想到了時尚圈，不是每年都有流行的款式嗎，你一直跟時尚博主的步伐也會樂此不疲，就像今天流行postcss你學postcss 明天流行一個新玩意你又去學那個新玩意。 但經典的款式永遠靜靜的在那裡。

最大的優勢是不用寫一級又一級重複的前綴了

以前寫的，你可以看下，就完全懂了。

https://www.60sky.com/post/postcss-introduce.html

大家幫忙點個贊吧

其他答主都說得不錯，但是有一點我不得不指出，那就是對於新手來說，這裡面是有一個認知障礙需要點明的。

新手的思路：

以前，我只需要寫好 CSS，然後刷新頁面，就可以看到效果了。（題目中說到的「手寫」就是指這種所見即所得的感覺）。

現在，這種感覺消失了：「我寫的 CSS 不是我寫的 CSS，而是被一個叫 PostCSS 改過的東西」

這個 PostCSS 存在的意義是什麼？工作原理又是什麼？

我在之前一個所謂「被打臉」的答案里說過，前端應該學 C、編譯原理這些東西，才能理解一些基本的東西。這個題目就是一個例子。

你寫的代碼，不是最終的代碼

學過編譯型語言的人都知道，代碼會被轉化成機器碼或者中間碼，你寫的代碼，不是最終運行在機器上的代碼（二進位）。

而只學的 JS 的人，沒有這種體會。

PostCSS 就是一種類似編譯的過程（應該叫轉譯）。它的目的是讓你的代碼更可靠（Bug更少、兼容性更高甚至功能更強大）。PostCSS 就可以認為是 CSS 的「編譯器」。

PostCSS 的工作原理又是什麼呢

稍微了解過編譯原理的人都知道，代碼在被理解的時候會被轉化成一個結構化的「樹」，也就是抽象語法樹（何為語法樹）。

稍微看一下 PostCSS 的插件開發指南就知道怎麼給它開發插件了：

css.walkRules(function (rule) {
rule.walkDecls(function (decl, i) {
});
});

這不就是在遍歷語法樹嗎？我只需要改變語法樹中的一些節點，就可以得到新的 CSS 語法樹。這個語法樹會生成新的代碼。

再比如 Grunt 是跟 Makefile 一脈相承，Gulp 跟 Shell 里的 pipe 一脈相承。如果你對 Makefile 和 Bash Script 熟的話，理解 Grunt 和 Gulp 就是幾分鐘的事情。

也難為其他幾個答主，只能用 babel 來類比 PostCSS 了。對 JS 世界的人來說，也就只能拿 babel 來舉例了。

所以說，該學的總是要學的。

可以這麼理解，less/sass 與 postcss 的關係就像 coffeescript/typescript 與 babel 的關係。

babel 編譯 es2015+ ，安裝各種插件支持這些語法

postcss 編譯 next css，安裝各種插件支持這些語法

less/sass 編譯自己的語法 -&> css

coffeescript/typescript 編譯自己的語法 -&> js

近來的前端相關問題都出現那個方應杭，回答總是有點酸前端秀優越的感覺，雖然答案有參考價值，但透露出那種小傲嬌真的很可笑看得也不太舒心，容易引戰。

其實不應該問前端來回答這個問題，這個工具明擺著就是給後端開發者用的。因為如果寫個CSS都要用各種工具來輔助的話，這個前端的能力是可想而知的。

PostCSS就是一個腳手架，基於這個腳手架，你可以更輕鬆的開發出各種編譯css的工具。

而針對普通用戶而言，可以自己選擇各種PostCSS插件，來搭建自己的css編譯流程。

比如我所習慣的CSS編譯流程是這樣的：

CSS語法風格檢查&>CSS next語法兼容&>添加私有屬性前綴&>添加IE的HACK&>壓縮

這個流程對應的PostCSS插件插件就是：

stylelint&>cssnext&>autoprefixer&>cssgrace&>cssnano

推薦閱讀：

※airbnb 的 Hypernova 跟已有的 Universal JS 解決方案相比有哪些優勢？
※說說各位轉行做前端的經驗？
※flow.js/typescript 這類定義參數類型的意義何在？
※facebook immutable.js 意義何在，使用場景？
※如果寫一個靜態HTML頁面，直接寫HTML代碼和用JS動態生成代碼，哪種方式要好點？為什麼？

TAG:前端開發 | CSS | JavaScript | 前端工程師 |