Vue: scoped 樣式與 CSS Module 對比

每個通過 vue-cli 創建的 Vue.js 應用都內置了兩個很好的解決方案：Scoped CSS 和 CSS Modules (模塊式 CSS)。兩種方案各有優缺點，我們來看下哪種方案在你的案例中更適用。

• Scoped 樣式
• 我們只需要在 style 標籤上添加一個 scoped 屬性即可啟用 scoped 樣式：

• 這樣就會使得我們的樣式只被應用到這個組件中的元素上。這是藉助 PostCSS 實現的，它會將上面的代碼轉換成下面這樣：

• 現在假設你需要調整一個視圖中的某個組件的寬度，那麼你可以像你平時那樣做的一樣：在這個組件上添加一個額外的 class 來設置其樣式。

• 經轉換後：

• 不過請注意：這個特性存在一個缺陷，即如果你子組件的根元素上有一個類已經在這個父組件中定義過了，那麼這個父組件的樣式就會泄露到子組件中。
• 還有一些情況是我們需要對我們的子組件的深層結構設置樣式——雖然這種做法並不受推薦且應該避免。為了簡便起見，我們假設我們的父組件現在要對 BasePanel 的標題設置樣式，在 scoped 樣式中，這種情況可以使用 >>> 連接符（Vue高版本特性，在stylus中可用）（或者 /deep/（在Sass中）|| @{deep}（在less中） ）實現。

• 經轉換後：

• 非常簡單，是吧？可是別忘記，我們卻因此失去了組件的封裝效果。這個組件內的所有的 .title 類的樣式都會被這些樣式所浸染——即便是孫節點。
• 模塊式 CSS

• 這次我們使用的不是 scoped 屬性，而是 module。這等於告訴 vue-template-compiler 和 vue-cli 的 webpack 配置要對這一部分採用哪些相應的 loader，進而生成像下面這樣的 CSS：

• 它的特殊之處以及和 scoped 樣式不一樣的地方就在於所有創建的類可以通過這個組件的 $style 對象獲取。因此，要將這個類進行應用，我們需要像下面這樣進行 class 綁定：

• 這段代碼將生成下面的 HTML 及相關的樣式：

• 它的第一點好處就是，當我們在 HMTL 中查看這個元素時我們可以立刻知道它所屬的是哪個組件；第二點好處是，一切都變成顯式的了，我們擁有了徹底的控制權——不會再有什麼奇怪的現象了。和 scoped 樣式那種把普通的標籤也加上那些 data 屬性的做法不一樣，這些普通標籤在轉換後還是最初的樣子。
• 比較 scoped 樣式中的第二個例子，我們來看下我們可以怎麼對那個組件設置樣式：

• 其轉換後：

• 毫無意外，跟我們期望的結果一樣。此外，因為所有的 CSS 類可以通過 $style 對象獲取到，所以我們可以通過 props 將這些類傳遞到任何我們希望的深度中，這樣，在子組件中的任意位置使用這些類就會變得極其容易：

• 模塊式 CSS 與 JS 有著很好的互操作性 (interoperability)，這一點不只局限於 CSS 類。我們還可以使用 :export 關鍵字將其他的東西導出到 $style 對象上。

• 例如，想像一下你有一個圖表需要開發 —— 你可以在 CSS 中定義你的色彩變數的同時將其導出，以供你的組件使用：

• 總結

• scoped 樣式的使用不需要額外的知識，給人舒適的感覺。它所存在的局限，也正是它的使用簡單的原因。它可以用於支持小型到中型的應用。
• 在更大的應用或更複雜的場景中，這個時候，對於 CSS 的運用，我們就會希望它更加顯式，擁有更多的控制權。雖然在模板中大量使用 $style 看起來並不那麼「性感」，但卻更加安全和靈活，為此我們只需付出微小的代價。還有一個好處就是我們可以用 JS 獲取到我們定義的一些變數（如色彩值、樣式斷點），這樣我們就無需手動保持其在多個文件中同步。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！