PostCSS是一個平臺，具體要取決於這個平臺上面的插件可以做什麼，常用的插件如下。 ...
1.如何解決CSS的模塊化問題？
- 使用Less，Sass等CSS預處理器
- 使用PostCSS插件（postcss-import/precss）
- 使用webpack處理CSS（css-loader + style-loader）
2.PostCSS是什麼？
- PostCSS是一個平臺，具體要取決於這個平臺上面的插件可以做什麼
- 常用的插件如下
// 1. 可以添加屬性首碼，適應所有的瀏覽器
const autoprefixer = require('autoprefixer');
// 2. 將所有的import 導入進來的模塊全部合併為一個文件
const atImport = require('postcss-import');
// 3. 實現代碼的壓縮優化
const cssnano = require('postcss-cssnano');
// 4. cssnext提前使用CSS的高級語法
const cssnext = require('postcss-cssnext');
// 5. precss 類似於sass的語法處理
const precss = require('precss')3.import實現模塊的合併（模塊分開，提前合併）
4.CSS語法檢查，相容性檢查
5.壓縮文件
3.CSS modules是什麼？如何使用?
- 解決類名衝突的問題
- 使用PostCSS或者Webpack等構建工具進行編譯
- 在HTML模板中使用編譯過程產生的類名（對象.類名的方式來獲取）
4.為什麼使用JS來引用，載入CSS？
- JS作為入口，管理資源具有天然優勢（HTML，CSS本身是無法管理模塊和資源的）
- 將組件的結果、樣式、行為封裝到一起，增強組件內聚（減少代碼耦合）
- 可以做更多的處理（webpack，使用CSS Modules 解決了命名的衝突問題）
5. PostCSS的實現原理說一下？
[!NOTE]
PostCSS是一個通過JS插件轉換樣式表的工具，它本身並不是一門新的CSS語言，而是一個平臺或者是生態心態，提供插件擴展服務即JS API，開發者可以根據這些介面，定製開發插件，
目前比較流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。
5.1 解析步驟
- 將CSS解析成抽象語法樹(AST樹)
- 將AST樹”傳遞”給任意數量的插件處理
- 將處理完畢的AST樹重新轉換成字元串
5.2 處理機制
Source string → Tokenizer → Parser → AST → Processor → Stringifier
5.2.1 Tokenizer
[!NOTE]
將源css字元串進行分詞
舉個例子：
.className { color: #FFF; }
通過Tokenizer後結果如下：
[
["word", ".className", 1, 1, 1, 10]
["space", " "]
["{", "{", 1, 12]
["space", " "]
["word", "color", 1, 14, 1, 18]
[":", ":", 1, 19]
["space", " "]
["word", "#FFF" , 1, 21, 1, 23]
[";", ";", 1, 24]
["space", " "]
["}", "}", 1, 26]
]以word類型為例，參數如下：
const token = [
// token 的類型，如word、space、comment
'word',
// 匹配到的詞名稱
'.className',
// 代表該詞開始位置的row以及column，但像 type為`space`的屬性沒有該值
1, 1,
// 代表該詞結束位置的row以及column，
1, 10
]5.2.2 Parser
[!NOTE]
經過Tokenizer之後，需要Parser將結果初始化為AST
this.root = {
type: 'root',
source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
start: { line: 1, column: 1 } ,
end: { line: 1, column: 27 }
},
raws:{after: "", semicolon: false}
nodes // 子元素
}5.2.3 Processor
經過AST之後，PostCSS提供了大量JS API給插件用
5.2.4 Stringifier
插件處理後，比如加瀏覽器首碼，會被重新Stringifier.stringify為一般CSS。
6.談一下你對前端工程化的理解？
參考博客：
