最近業務調整，組內開啟了前端工程化方面的基建，我主要負責 CSS 技術選型這一塊，針對目前業界主流的幾套方案進行了比較完善的調研與比較，分享給大家。

目前整個 CSS 工具鏈、工程化領域的主要方案如下：

而我們技術選型的標準如下：

•  開發速度快
•  開發體驗友好
•  調試體驗友好
•  可維護性友好
•  擴展性友好
•  可協作性友好
•  體積小
•  有最佳實踐指導

目前主要需要對比的三套方案：

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

純 CSS 側方案

介紹與優點

維護狀態：一般

Star 數：16.7K

支持框架：無框架限制

項目地址：https://github.com/less/less.js

Less/Sass + PostCSS 這種方案在目前主流的組件庫和企業級項目中使用很廣，如 ant-design 等

它們的主要作用如下：

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

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

比如我寫一個組件在響應式各個斷點下的展示情況的 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;  
  }  
} 

或導入一些用于標準化瀏覽器差異的代碼： 

@import "normalize.css";   
// component 相關的其他代碼 

不足

這類方案的一個主要問題就是，只是對 CSS 本身進行了增強，但是在幫助開發者如何寫更好的 CSS、更高效、可維護的 CSS 方面并沒有提供任何建議。

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

優化

•  可以引入 CSS 設計規范：BEM 規范，來輔助用戶在整個網頁的 HTML 骨架以及對應的類上進行設計
•  可以引入 CSS Modules，將 CSS 文件進行 “作用域” 限制，確保在之后維護時，修改一個內容不會引起全局中其他樣式的效果

BEM 規范

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

拿設計一個 Button 為例： 

/* Block */  
.btn {}  
/* 依賴于 Block 的 Element */  
.btn__price {}  
/* 修改 Block 風格的 Modifier */  
.btn--orange {}  
.btn--big {} 

遵循上述規范的一個真實的 Button： 

<a class="btn btn--big btn--orange" href="#">  
  <span class="btn__price">$3</span>  
  <span class="btn__text">BIG BUTTON</span>  
</a> 

可以獲得如下的效果：

CSS Modules

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

一個例子如下： 

import React from 'react';  
import style from './App.css';  
export default () => {  
  return (  
    <h1 className={style.title}>  
      Hello World  
    </h1>  
  );  
};  

.title {  
  composes: className;  
  color: red;  
} 

上述經過編譯會變成如下 hash 字符串： 

<h1 class="_3zyde4l1yATCOkgn-DBWEL">  
  Hello World 
</h1>  

._3zyde4l1yATCOkgn-DBWEL {  
  color: red;  
}  

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

純 JS 側方案

介紹與優點   

維護狀態：一般

Star 數：35.2K

 支持框架：React ，通過社區支持 Vue 等框架

項目地址：https://github.com/styled-components/styled-components

使用 JS 的模板字符串函數，在 JS 里面寫 CSS 代碼，這帶來了兩個認知的改變：

•  不是在根據 HTML，然后去寫 CSS，而是站在組件設計的角度，為組件寫 CSS，然后應用組件的組合思想搭建大應用
•  自動提供類似 CSS Modules 的體驗，不用擔心樣式的全局污染問題

同時帶來了很多 JS 側才有的各種功能特性，可以讓開發者用開發 JS 的方式開發 CSS，如編輯器自動補全、Lint、編譯壓縮等。

比如我寫一個按鈕： 

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(  
  <div>  
    <Button>Normal</Button>  
    <Button primary>Primary</Button>  
  </div>  
); 

可以獲得如下效果：

還可以擴展樣式： 

// 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(  
  <div> 
    <Button>Normal Button</Button>  
    <TomatoButton>Tomato Button</TomatoButton>  
  </div>  
); 

可以獲得如下效果：

不足

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

但是它仍然有一些不足：

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

整體來說不太符合團隊協作使用，需要人為總結最佳實踐和規范等。

優化

•  尋求一套寫 CSS 的最佳實踐和團隊協作規范
•  能夠擁有大量的物料庫或輔助類等，提高開發效率，快速完成應用開發

偏向 HTML 側方案

介紹與優點

 

維護狀態：積極

Star 數：48.9K

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

項目地址：https://github.com/tailwindlabs/tailwindcss

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

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

<button class="btn btn--secondary">Decline</button>  
<button class="btn btn--primary">Accept</button>  

上述代碼應用 BEM 風格的類名設計，然后設計兩個按鈕，而這兩個類名類似主流組件庫里面的 Button 的不同狀態的設計，而這兩個類又是由更加基礎的 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;  
} 

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

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

通過 Tailwind 提供的 @apply 方法來對這些輔助類進行組合構建更上層的樣式類。

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

可以看到 TailwindCSS 將我們開發網站的過程抽象成為使用 Figma 等設計軟件設計界面的過程，同時提供了一套用于設計的規范，相當于內置最佳實踐，如顏色、陰影、字體相關的內容，一個很形象的圖片可以說明這一點：

TailwindCSS 為我們規劃了一個元素可以設置的屬性，并且為每個屬性給定了一組可以設置的值，這些屬性+屬性值組合成一個有機的設計系統，非常便于團隊協作與共識，讓我們開發網站就像做設計一樣簡單、快速，但是整體風格又能保持一致。

TailwindCSS 同時也能與主流組件庫如 React、Vue、Svelte 結合，融入基于組件的 CSS 設計思想，但又只需要修改 HTML 上的類名，如我們設計一個食譜組件： 

// 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 (  
    <div className="divide-y divide-gray-100">  
      <Nav>  
        <NavItem href="/featured" isActive>Featured</NavItem>  
        <NavItem href="/popular">Popular</NavItem>  
        <NavItem href="/recent">Recent</NavItem>  
      </Nav>  
      <List>  
        {recipes.map((recipe) => (  
          <ListItem key={recipe.id} recipe={recipe} />  
        ))}  
      </List>  
    </div>  
  )  
}  
// Nav.js  
export default function Nav({ children }) {  
  return (  
    <nav className="p-4">  
      <ul className="flex space-x-2">  
        {children}  
      </ul>  
    </nav>  
  )  
}  
// NavItem.js  
export default function NavItem({ href, isActive, children }) {  
  return (  
    <li>  
      <a  
        href={href}  
        className={`block px-4 py-2 rounded-md ${isActive ? 'bg-amber-100 text-amber-700' : ''}`}  
      >  
        {children}  
      </a>  
    </li>  
  )  
}  
// List.js  
export default function List({ children }) {  
  return (  
    <ul className="divide-y divide-gray-100">  
      {children}  
    </ul>  
  )  
}  
//ListItem.js  
export default function ListItem({ recipe }) {  
  return ( 
    <article className="p-4 flex space-x-4">  
      <img src={recipe.image} alt="" className="flex-none w-18 h-18 rounded-lg object-cover bg-gray-100" width="144" height="144" />  
      <div className="min-w-0 relative flex-auto sm:pr-20 lg:pr-0 xl:pr-20">  
        <h2 className="text-lg font-semibold text-black mb-0.5">  
          {recipe.title}  
        </h2>  
        <dl className="flex flex-wrap text-sm font-medium whitespace-pre">  
          <div>  
            <dt className="sr-only">Time</dt> 
            <dd>  
              <abbr title={`${recipe.time} minutes`}>{recipe.time}m</abbr>  
            </dd>  
          </div>  
          <div>  
            <dt className="sr-only">Difficulty</dt>  
            <dd> · {recipe.difficulty}</dd>  
          </div>  
          <div>  
            <dt className="sr-only">Servings</dt>  
            <dd> · {recipe.servings} servings</dd>  
          </div>  
          <div className="flex-none w-full mt-0.5 font-normal">  
            <dt className="inline">By</dt>{' '}  
            <dd className="inline text-black">{recipe.author}</dd>  
          </div>  
          <div class="absolute top-0 right-0 rounded-full bg-amber-50 text-amber-900 px-2 py-0.5 hidden sm:flex lg:hidden xl:flex items-center space-x-1">  
            <dt className="text-amber-500">  
              <span className="sr-only">Rating</span>  
              <svg width="16" height="20" fill="currentColor">  
                <path d="M7.05 3.691c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.372 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.363-1.118L.98 9.483c-.784-.57-.381-1.81.587-1.81H5.03a1 1 0 00.95-.69L7.05 3.69z" /> 
               </svg>  
            </dt>  
            <dd>{recipe.rating}</dd>  
          </div>  
        </dl>  
      </div>  
    </article>  
  )  
} 

上述食譜的效果如下：

可以看到我們無需寫一行 CSS，而是在 HTML 里面應用各種輔助類，結合 React 的組件化設計，既可以輕松完成一個非常現代化且好看的食譜組件。

除了上面的特性，TailwindCSS 在響應式、新特性支持、Dark Mode、自定義配置、自定義新的輔助類、IDE 方面也提供非常優秀的支持，除此之外還有基于 TailwindCSS 構建的物料庫 Tailwind UI ，提供各種各樣成熟、好看、可用于生產的物料庫：

因為需要自定的 CSS 不多，而需要自定義的 CSS 可以定義為可復用的輔助類，所以在可維護性方面也是極好的。

不足

•  因為要引入一個額外的運行時，TailwindCSS 輔助類到 CSS 的編譯過程，而隨著組件越來越多，需要編譯的工作量也會變大，所以速度會有影響
•  過于底層，相當于給了用于設計的最基礎的指標，但是如果我們想要快速設計網站，那么可能還需要一致的、更加上層的組件庫
•  相當于引入了一套框架，具有一定的學習成本和使用成本

優化

•  Tailwind 2.0 支持 JIT[1]，可以大大提升編譯速度，可以考慮引入
•  基于 TailwindCSS，設計一套符合自身風格的上層組件庫、物料庫，便于更加快速開發
•  提前探索、學習和總結一套教程與開發最佳實踐
•  探索 styled-components 等結合 TailwindCSS 的開發方式