【前端知識體系-CSS相關】CSS工程化方案

1.如何解決CSS的模塊化問題？

1. 使用Less，Sass等CSS預處理器
2. 使用PostCSS插件（postcss-import/precss）
3. 使用webpack處理CSS（css-loader + style-loader）

2.PostCSS是什麼？

1. PostCSS是一個平臺，具體要取決於這個平臺上面的插件能夠作什麼
2. 經常使用的插件以下

//  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是什麼？如何使用?

1. 解決類名衝突的問題
2. 使用PostCSS或者Webpack等構建工具進行編譯
3. 在HTML模板中使用編譯過程產生的類名（對象.類名的方式來獲取）

4.爲何使用JS來引用，加載CSS？

1. JS做爲入口，管理資源具備自然優點（HTML，CSS自己是沒法管理模塊和資源的）
2. 將組件的結果、樣式、行爲封裝到一塊兒，加強組件內聚（減小代碼耦合）
3. 能夠作更多的處理（webpack，使用CSS Modules 解決了命名的衝突問題）

5. PostCSS的實現原理說一下？

[!NOTE]
PostCSS是一個經過JS插件轉換樣式表的工具，它自己並非一門新的CSS語言，而是一個平臺或者是生態心態，提供插件擴展服務即JS API，開發者能夠根據這些接口，定製開發插件，
目前比較流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。

5.1 解析步驟

1. 將CSS解析成抽象語法樹(AST樹)
2. 將AST樹」傳遞」給任意數量的插件處理
3. 將處理完畢的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.談一下你對前端工程化的理解？

參考博客：

• http://www.javashuo.com/article/p-vfpsyofr-du.html
• http://www.javashuo.com/article/p-pcwwdqfm-ck.html