最近業(yè)務(wù)調(diào)整，組內(nèi)開啟了前端工程化方面的基建，我主要負(fù)責(zé) CSS 技術(shù)選型這一塊，針對(duì)目前業(yè)界主流的幾套方案進(jìn)行了比較完善的調(diào)研與比較，分享給大家。

目前整個(gè) CSS 工具鏈、工程化領(lǐng)域的主要方案如下：

• 開發(fā)速度快
• 開發(fā)體驗(yàn)友好
• 調(diào)試體驗(yàn)友好
• 可維護(hù)性友好
• 擴(kuò)展性友好
• 可協(xié)作性友好
• 體積小
• 有最佳實(shí)踐指導(dǎo)

目前主要需要對(duì)比的三套方案：

• Less/Sass + PostCSS 的純 CSS c側(cè)方案
• styled-components / emotion 的純 CSS-in-JS 側(cè)方案
• TailwindCSS 的以寫輔助類為主的 HTML 側(cè)方案

純 CSS 側(cè)方案

介紹與優(yōu)點(diǎn)

維護(hù)狀態(tài)：一般

Star 數(shù)：16.7K

支持框架：無框架限制

項(xiàng)目地址：https://github.com/less/less.js

Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業(yè)級(jí)項(xiàng)目中使用很廣，如 ant-design 等

它們的主要作用如下：

• 為 CSS 添加了類似 JS 的特性，你也可以使用變量、mixin，寫判斷等
• 引入了模塊化的概念，可以在一個(gè) less 文件中導(dǎo)入另外一個(gè) less 文件進(jìn)行使用
• 兼容標(biāo)準(zhǔn)，可以快速使用 CSS 新特性，兼容瀏覽器 CSS 差異等

這類工具能夠與主流的工程化工具一起使用，如 Webpack，提供對(duì)應(yīng)的 loader 如 sass-loader，然后就可以在 React/Vue 項(xiàng)目中建 .scss 文件，寫 sass 語法，并導(dǎo)入到 React 組件中生效。

比如我寫一個(gè)組件在響應(yīng)式各個(gè)斷點(diǎn)下的展示情況的 sass 代碼：

.component?{

??width:?300px;

??@media?(min-width:?768px)?{

????width:?600px;

????@media??(min-resolution:?192dpi)?{

??????background-image:?url(/img/retina2x.png);

????}

??}

??@media?(min-width:?1280px)?{

????width:?800px;

??}

}

或?qū)胍恍┯糜跇?biāo)準(zhǔn)化瀏覽器差異的代碼：

@import?"normalize.css";?



//?component?相關(guān)的其他代碼

不足

這類方案的一個(gè)主要問題就是，只是對(duì) CSS 本身進(jìn)行了增強(qiáng)，但是在幫助開發(fā)者如何寫更好的 CSS、更高效、可維護(hù)的 CSS 方面并沒有提供任何建議。

• 你依然需要自己定義 CSS 類、id，并且思考如何去用這些類、id 進(jìn)行組合去描述 HTML 的樣式
• 你依然可能會(huì)寫很多冗余的 Less/Sass 代碼，然后造成項(xiàng)目的負(fù)擔(dān)，在可維護(hù)性方面也有巨大問題

優(yōu)化

• 可以引入 CSS 設(shè)計(jì)規(guī)范：BEM 規(guī)范，來輔助用戶在整個(gè)網(wǎng)頁的 HTML 骨架以及對(duì)應(yīng)的類上進(jìn)行設(shè)計(jì)
• 可以引入 CSS Modules，將 CSS 文件進(jìn)行 “作用域” 限制，確保在之后維護(hù)時(shí)，修改一個(gè)內(nèi)容不會(huì)引起全局中其他樣式的效果

BEM 規(guī)范

B （Block）、E（Element）、M（Modifier），具體就是通過塊、元素、行為來定義所有的可視化功能。

拿設(shè)計(jì)一個(gè) Button 為例：

/*?Block?*/

.btn?{}



/*?依賴于?Block?的?Element?*/

.btn__price?{}



/*?修改?Block?風(fēng)格的?Modifier?*/

.btn--orange?{}

.btn--big?{}

遵循上述規(guī)范的一個(gè)真實(shí)的 Button：

"btn?btn--big?btn--orange"?href="#">

??"btn__price">$3

??"btn__text">BIG?BUTTON

可以獲得如下的效果：

CSS Modules

CSS Modules 主要為 CSS 添加局部作用域和模塊依賴，使得 CSS 也能具有組件化。

一個(gè)例子如下：

import?React?from?'react';

import?style?from?'./App.css';



export?default?()?=>?{

??return?(

????

??????Hello?World

????

??);

};

.title?{

??composes:?className;

??color:?red;

}

上述經(jīng)過編譯會(huì)變成如下 hash 字符串：

"_3zyde4l1yATCOkgn-DBWEL">

??Hello?World

._3zyde4l1yATCOkgn-DBWEL?{

??color:?red;

}

CSS Modules 可以與普通 CSS、Less、Sass 等結(jié)合使用。

純 JS 側(cè)方案

介紹與優(yōu)點(diǎn)

維護(hù)狀態(tài)：一般

Star 數(shù)：35.2K

支持框架：React ，通過社區(qū)支持 Vue 等框架

項(xiàng)目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數(shù)，在 JS 里面寫 CSS 代碼，這帶來了兩個(gè)認(rèn)知的改變：

• 不是在根據(jù) HTML，然后去寫 CSS，而是站在組件設(shè)計(jì)的角度，為組件寫 CSS，然后應(yīng)用組件的組合思想搭建大應(yīng)用
• 自動(dòng)提供類似 CSS Modules 的體驗(yàn)，不用擔(dān)心樣式的全局污染問題

同時(shí)帶來了很多 JS 側(cè)才有的各種功能特性，可以讓開發(fā)者用開發(fā) JS 的方式開發(fā) CSS，如編輯器自動(dòng)補(bǔ)全、Lint、編譯壓縮等。

比如我寫一個(gè)按鈕：

const?Button?=?styled.button`

??/*?Adapt?the?colors?based?on?primary?prop?*/

??background:?${props?=>?props.primary???"palevioletred"?:?"white"};

??color:?${props?=>?props.primary???"white"?:?"palevioletred"};



??font-size:?1em;

??margin:?1em;

??padding:?0.25em?1em;

??border:?2px?solid?palevioletred;

??border-radius:?3px;

`;



render(

??


????Normal

????Primary

??


);

可以獲得如下效果：

還可以擴(kuò)展樣式：

//?The?Button?from?the?last?section?without?the?interpolations

const?Button?=?styled.button`

??color:?palevioletred;

??font-size:?1em;

??margin:?1em;

??padding:?0.25em?1em;

??border:?2px?solid?palevioletred;

??border-radius:?3px;

`;



//?A?new?component?based?on?Button,?but?with?some?override?styles

const?TomatoButton?=?styled(Button)`

??color:?tomato;

??border-color:?tomato;

`;



render(

??


????Normal?Button

????Tomato?Button

??


);

可以獲得如下效果：

不足

雖然這類方案提供了在 JS 中寫 CSS，充分利用 JS 的插值、組合等特性，然后應(yīng)用 React 組件等組合思想，將組件與 CSS 進(jìn)行細(xì)粒度綁定，讓 CSS 跟隨著組件一同進(jìn)行組件化開發(fā)，同時(shí)提供和組件類似的模塊化特性，相比 Less/Sass 這一套，可以復(fù)用 JS 社區(qū)的最佳實(shí)踐等。

但是它仍然有一些不足：

• 仍然是是對(duì) CSS 增強(qiáng)，提供非常大的靈活性，開發(fā)者仍然需要考慮如何去組織自己的 CSS
• 沒有給出一套 “有觀點(diǎn)” 的最佳實(shí)踐做法
• 在上層也缺乏基于 styled-components 進(jìn)行復(fù)用的物料庫可進(jìn)行參考設(shè)計(jì)和使用，導(dǎo)致在初始化使用時(shí)開發(fā)速度較低
• 在 JS 中寫 CSS，勢(shì)必帶來一些本屬于 JS 的限制，如 TS 下，需要對(duì) Styled 的組件進(jìn)行類型注釋
• 官方維護(hù)的內(nèi)容只兼容 React 框架，Vue 和其他框架都由社區(qū)提供支持

整體來說不太符合團(tuán)隊(duì)協(xié)作使用，需要人為總結(jié)最佳實(shí)踐和規(guī)范等。

優(yōu)化

• 尋求一套寫 CSS 的最佳實(shí)踐和團(tuán)隊(duì)協(xié)作規(guī)范
• 能夠擁有大量的物料庫或輔助類等，提高開發(fā)效率，快速完成應(yīng)用開發(fā)

偏向 HTML 側(cè)方案

介紹與優(yōu)點(diǎn)

維護(hù)狀態(tài)：積極

Star 數(shù)：48.9K

支持框架：React、Vue、Svelte 等主流框架

項(xiàng)目地址：https://github.com/tailwindlabs/tailwindcss

典型的是 TailwindCSS，一個(gè)輔助類優(yōu)先的 CSS 框架，提供如 flex 、pt-4 、text-center 、rotate-90 這樣實(shí)用的類名，然后基于這些底層的輔助類向上組合構(gòu)建任何網(wǎng)站，而且只需要專注于為 HTML 設(shè)置類名即可。

一個(gè)比較形象的例子可以參考如下代碼：

"btn?btn--secondary">Decline

"btn?btn--primary">Accept

上述代碼應(yīng)用 BEM 風(fēng)格的類名設(shè)計(jì)，然后設(shè)計(jì)兩個(gè)按鈕，而這兩個(gè)類名類似主流組件庫里面的 Button 的不同狀態(tài)的設(shè)計(jì)，而這兩個(gè)類又是由更加基礎(chǔ)的 TailwindCSS 輔助類組成：

.btn?{

??@apply?text-base?font-medium?rounded-lg?p-3;

}



.btn--primary?{

??@apply?bg-rose-500?text-white;

}



.btn--secondary?{

??@apply?bg-gray-100?text-black;

}

上面的輔助類包含以下幾類：

• 設(shè)置文本相關(guān)：text-base 、font-medium 、text-white 、text-black
• 設(shè)置背景相關(guān)的：bg-rose-500 、bg-gray-100
• 設(shè)置間距相關(guān)的：p-3
• 設(shè)置邊角相關(guān)的：rounded-lg

通過 Tailwind 提供的 @apply 方法來對(duì)這些輔助類進(jìn)行組合構(gòu)建更上層的樣式類。

上述的最終效果展示如下：

可以看到 TailwindCSS 將我們開發(fā)網(wǎng)站的過程抽象成為使用 Figma 等設(shè)計(jì)軟件設(shè)計(jì)界面的過程，同時(shí)提供了一套用于設(shè)計(jì)的規(guī)范，相當(dāng)于內(nèi)置最佳實(shí)踐，如顏色、陰影、字體相關(guān)的內(nèi)容，一個(gè)很形象的圖片可以說明這一點(diǎn)：

TailwindCSS 為我們規(guī)劃了一個(gè)元素可以設(shè)置的屬性，并且為每個(gè)屬性給定了一組可以設(shè)置的值，這些屬性+屬性值組合成一個(gè)有機(jī)的設(shè)計(jì)系統(tǒng)，非常便于團(tuán)隊(duì)協(xié)作與共識(shí)，讓我們開發(fā)網(wǎng)站就像做設(shè)計(jì)一樣簡(jiǎn)單、快速，但是整體風(fēng)格又能保持一致。

TailwindCSS 同時(shí)也能與主流組件庫如 React、Vue、Svelte 結(jié)合，融入基于組件的 CSS 設(shè)計(jì)思想，但又只需要修改 HTML 上的類名，如我們?cè)O(shè)計(jì)一個(gè)食譜組件：

//?Recipes.js

import?Nav?from?'./Nav.js'

import?NavItem?from?'./NavItem.js'

import?List?from?'./List.js'

import?ListItem?from?'./ListItem.js'



export?default?function?Recipes({?recipes?})?{

??return?(

????"divide-y?divide-gray-100">

??????

??????

????????{recipes.map((recipe)?=>?(

??????????

????????))}

??????

????