前言
在上一篇文章中那些發生在 CSS 之「前」的魔法 —— 預處理器，我們探討了 CSS 預處理器，並了解為什麼需要使用「 CSS 處理器」。這次讓我們來了解後處理器，特別是 PostCSS 能夠為你幫上什麼忙！文章主要會探討以下幾個重點 (附帶範例)：
- ✔️ 提供什麼好處、為什麼需要它們？
- 🔎 有哪些後處理器可以選擇？
- ❌ 或許不應該使用後處理器的原因
以下是關係圖表，在開始之前可以回顧一下後處理器的位置。
使用後處理器的理由？
後處理器會把現有的 CSS 檔案解析後處理，實現某些功能。例如自動添加 Vendor Prefix (Prefixfree)或使用最新的語法(Stylecow)。不過在本文中會主要舉例 PostCSS，並了解它有什麼獨特之處。
有哪些後處理器可以選擇？
基本上我只用過 PostCSS，也只推薦 PostCSS，不推薦任何其他處理器。尤其看 State of CSS 2021 統計，就知道最好跟上大家都在用的工具，除非有什麼特殊的需求。PostCSS 基本沒什麼辦不到的。
PostCSS — 借助 Javascript 之力處理 CSS
PostCSS 幾乎是後處理器的代名詞，不過實際上這個名詞並不太準確，因為它實際上可以預處理，也能後處理。這樣尷尬矛盾的命名他們團隊 Twitter上也提到過 。
簡單來說，PostCSS 讓你用 Javascript 插件自動化處理你的 CSS，只要想得到的功能，都能在 PostCSS 插件庫(PostCSS.part)中找得到，舉例來說：
- 用全新的方式撰寫 CSS (Tailwind CSS)
- 壓縮現有檔案 (CSSnano)
- 自動添加 Vendor Prefix (Autoprefixer)
- 立即使用最新出爐的語法 (postcss-preset-env)
- 提醒語法上的錯誤並修正 (Stylelint)
那麼 PostCSS 和其他 CSS 處理器比起來差在哪裡？
- 壓倒性的使用率與好感 (State of CSS 2021 Pre-/Post-processors)。
- 本身沒有任何功能，但可以安裝各式各樣社群開發的插件來擴充。
- 能安裝、去除自己想要的功能，更快的建構時間。
- 風氣自由，可以自行開發插件上傳社群。
最後，為什麼你可能不需要預處理器
解釋完了預處理器的好處，也要了解什麼場合，你不應該用它。
非原生
說到底預處理器的功能仍是社群自行開發製作的，一個專案新增多餘的依賴 (Dependency) 並不是一件好事；而非原生的代碼可能在某一天就被原生所取代了，代表可能未來某一天某些預處理器提供的功能被趕上，你可能需要再重寫一遍。
更高層級的抽象
處理器幫助你施作 CSS 在一個更高的抽象級別，可能不了解的人需要花費成本來去維護你的代碼，營造一個更複雜的開發環境，投入額外的時間成本學習。
專案沒有很大
新增檔案，直接開始進入正事不好嗎？搞一大堆花里胡俏的東西在小專案省不了太多時間。純 CSS 多香阿？
結語
最終，要不要使用預處理器？要使用哪一款？關係到團隊與個人的偏好或專案的規模來決定，精進 CSS，不管哪款預處理器都能樣樣通。