聊起css，印象最深刻的就是剛畢業那會剛開始從事前端開發崗位工作的時候，身為一名 cut picture boy (切圖仔)，在頁面布局及還原設計圖中廣泛使用css來開發頁面，我記得剛開始接觸最多的就是Bootstrap(用於開發響應式布局、移動設備優先的 WEB)。然而隨着前端突飛猛進的編進，諸如element，ant design等優秀的ui庫出現，在對比中感到審美疲勞。言歸正傳，css近年來了也催生了蠻多新的解決方案，比如 CSS Modules、styled-components(css in js )、Functional CSS、CSS 原子類、CSS沙盒等等

1. CSS Module

CSS Module 顧名思義就是 CSS 模塊化，為什麼需要模塊化?我們知道隨着基於vue、react開發SPA的web應用，本質上是由多組件搭建而成，就好比用積木來搭房子，如果這個時候兩個組件的樣式類名重複了，那豈不是就衝突了?為了解決衝突就需要進行模塊化區分，沒有了命名衝突，更好地讓組件間沙箱化，而CSS Module就是css模塊化的實現方式之一

CSS Module 在打包的時候會將類名轉換成帶有hash值的新類名，根據命名規矩，從而杜絕css類名衝突的問題。

啊呆同學：CSS Module是不是就是Vue: scoped 樣式的實現方式呢?

答：不是的，CSS Scope是通過限制作用域來實現，樣式在局部生效，而不是真正意義上的css Module

我們知道，當一個style標籤擁有scoped屬性時候，它的css樣式只能用於當前的Vue組件，它的實現原理是通過PostCSS來實現，通過給相對應的dom新增一個屬性，同時給css選擇器新增一個對應的屬性，來對應這個唯一的dom，如下所示

而css module 是怎麼樣實現的呢，以vue為例子，如何使用CSS module

• webpack 直接 引入 vue-loader 使用文檔??[1]
• vue-cli3內置，可以直接開箱即用， 只需要在style標籤標記module，就可以在組件內使用CSS Modules了，更多操作看文檔使用文檔[2]

下面我們看看CSS Module在vue項目中的編譯效果

我們可以看到，CSS Modules在最終構建頁面時會自動重命名class，用vue官方描述就是，這個 module 特性指引 Vue Loader 作為名為 $style 的計算屬性，向組件注入 CSS Modules 局部對象。然後你就可以在模板中通過一個動態類綁定來使用它了

啊樂同學：你說CSS Module是 css 模塊化的一種實現方式，還有其他CSS模塊化實現方式嗎?

有的，比如BEM 命名規範，還有下節會介紹的 CSS in JS

這裡簡單介紹下BEM

拓展閱讀：

• CSS Modules 用法教程[3]
• BEM 官方規範[4]

2. CSS in JS

CSS in JS，顧名思義就是將應用的CSS樣式寫在JavaScript文件裡面，使用JS語言來寫CSS，包括替代原先寫後綴為.css、.less、.scss等文件

2.1 styled-components

styled-components 是 CSS in JS 實現方案中比較知名的，大多用於React，通過使用es6語法的標籤模板字符串語法為component定義css屬性，我們不用在設置className類名啦～ 我們看看那下面這個demo

啊雪同學：styled-components是為React而生的，那Vue能使用嗎?

答：可以的，styled-components team 專門為Vue開發了一個 vue-styled-components，和React的styled-components用法非常相似，有興趣可以玩玩，我玩得不溜(不過這個倉庫?也是有點少，看來很小眾, style-component寫起來確實有點彆扭)但我始終覺得 CSS-in-JS 會越來越流行 文檔鏈接??[5]

拓展：

styled-components 官網[6]

3.CSS 原子類

其實這個概念已經很老了，本質上也是一種編寫 CSS 的思想，簡而言之就是通過用原子類構造選擇器，比如我們定義一個base.css 文件，裡面定義了公共復用高的選擇器，諸如mgt20(來表示 margin-top: 20px )等等，好處在於便於抽出復用代碼，提高代碼復用程度，但是過度的抽象也會帶來了維護上的巨大成本。

3.1 tailwind

tailwind 官網鏈接[7]其實本質上也是一種原子類思維，一個 class 代表一種 CSS 屬性。優點在於它把 class 拆分到足夠細，粒度很小，很好很「原子」。在國外很吃香，因為自定義屬性強且類名語義話強，你再也不用為取class的名字很犯愁(畢竟單獨一個組件開發我們就可能需要n個類)，自定義就像搭積木一樣，但國內爭議比較大，早期原子類在國內基本被噴，到2020年後卻態度有所改觀。我們看下下面這段demo，官方事例如何實現一個卡片

我這一眼完全好多類名，但是確實看起來簡單就能構建，但這粒度也太小了吧～問題也隨着暴露，難記，用着用着，你就好比小時候要拿起字典來查閱單詞，tailwind寶典請查收 查閱鏈接 [8]

輪落地應用，當前twitter就是基於tailwind進行改版的，我們可以在控制台清晰看到

話說這個實驗室還蠻有錢，贊助了vite的廣告位

拓展閱讀：

• 如何評價CSS框架TailwindCSS?[9]

3.2 bulma

Bulma 是一個基於 Flexbox 布局技術的免費、開源的現代 CSS 框架，早期接觸的時候是在社區看到基於Bulma的Vue.js的輕量級UI組件buefy。它完全基於CSS，不需要javascript。這也是他跟boostrap的最大區別。不過現在也不是很主流，這裡不做過多闡述，感興趣同學可以深入了解，可以看下面這個例子

學習使用CSS框架並不是最終目的，它只是一個提升生產力的工具，工具的目的是用來提升我們開發效率，最終賦能到我們的產品中去，所以不用太糾結有沒有使用過這些框架，畢竟那麼多個框架你是不可能每個都會用。換句話講了解原理也是可以的, 能提升自己的認知

拓展閱讀：

• CSS 框架 Bulma 教程[10]

4.CSS Sandbox(沙盒)

css沙盒簡而言之就是起到樣式隔離的作用，互不干擾，前端接觸比較多的就是微前端了，畢竟要保證每個集成進來的應用樣式互不干擾。因為應用可能是不同團隊成員開發，正常是會有類名衝突的情況出現。

最早期的實現方式應該就是iframe了，iframe自帶天然隔離，但是這種方式局限性也很多，還有就像上文我們提及的幾個點，比如

• scoped CSS：通過定義屬性scoped來就能結合 DOM 樹限制 CSS 作用範圍
• CSS in js 及 CSS Module 是通過工具把樣式編譯成腳本
• 移除head內標籤：這也是qiankun(微前端框架) 的 css 沙箱的原理，通過記錄子項目運行時新增的 style/link 標籤，卸載子項目時移除這些標籤。重新添加新載入子項目的標籤來實現
• shadow DOM：你可以理解為dom中的dom，是 Web components一個重要屬性，它允許將隱藏的 DOM 樹附加到常規的 DOM 樹中，弊端就是兼容性較差，你可以看下兼容情況