大家好，我卡頌。

從17年誕生至今，社區(qū)對(duì)TailwindCSS的接受程度不斷提升：

一些使用過(guò)他的程序員大呼真香，而另一些程序員一聽到他宣揚(yáng)的「原子化CSS」理念就表示不能接受。

同樣是程序員，為什么分歧這么大？這篇文章會(huì)分析問(wèn)題形成的原因，給出建議，并預(yù)測(cè)TailwindCSS未來(lái)的走勢(shì)。

原子化CSS vs 語(yǔ)義化CSS

這篇文章不是TailwindCSS的科普文，但為了文章的完整性，有必要先介紹下TailwindCSS的核心理念 —— 「原子化CSS」。

元素樣式是由一條條CSS規(guī)則構(gòu)成的。對(duì)于「如何組織CSS規(guī)則」，可以分為兩個(gè)流派：

• 語(yǔ)義化CSS（Semantic CSS）
• 原子化CSS（Atomic/Utility-First CSS）

先說(shuō)「語(yǔ)義化CSS」，他很好理解，以下面這個(gè)class舉例：

.chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

即使我們沒(méi)有其他信息，光看這段代碼，也可以大體判斷出 —— 這是一個(gè)聊天通知卡片的樣式。

所以，對(duì)于采用「語(yǔ)義化CSS」規(guī)范的項(xiàng)目，重點(diǎn)在于「如何為組件定義語(yǔ)義」。這就誕生了很多「類名定義規(guī)則」，比如，下面是BEM(Block Element Modifier)規(guī)范的定義：

• Block：塊。
• Element：元素，是塊的組成部分。
• Modifier：修飾符，表示一種形態(tài)/狀態(tài)。

對(duì)于「警告狀態(tài)的聊天通知卡片」，符合BEM規(guī)范的類名為.chat-notification--warning。

「原子化CSS」則更關(guān)注CSS本身，上述聊天通知卡片用「原子化CSS」表達(dá)如下：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">...</div>

其中每個(gè)class代表一個(gè)定義好的CSS規(guī)則，比如：

• p-6代表padding: 1.5rem; /* 24px */。
• bg-white代表background-color: white。

對(duì)于用慣了「語(yǔ)義化CSS」的開發(fā)者，一時(shí)是很難接受「原子化CSS」的。在他們看來(lái)，這就是開歷史的倒車，還得額外記憶各種類名的含義。

之所以造成這種誤解，是因?yàn)檫@里有個(gè)很重要的因素被忽略了 —— 設(shè)計(jì)系統(tǒng)。

設(shè)計(jì)系統(tǒng)

在互聯(lián)網(wǎng)公司，頁(yè)面的產(chǎn)出流程一般如下：

• 設(shè)計(jì)師根據(jù)公司需要，定義一套設(shè)計(jì)系統(tǒng)
• 根據(jù)設(shè)計(jì)系統(tǒng)的規(guī)范，設(shè)計(jì)師使用工具設(shè)計(jì)頁(yè)面
• 前端工程師根據(jù)工具的標(biāo)注，產(chǎn)出頁(yè)面

所謂「設(shè)計(jì)系統(tǒng)」，就是對(duì)項(xiàng)目視圖各個(gè)部分的約定，比如：

• 布局約定
• 配色約定
• 尺寸約定

為了減少前端工程師的上手門檻，這套頁(yè)面產(chǎn)出流程對(duì)前端隱藏了設(shè)計(jì)系統(tǒng)的存在。

以國(guó)內(nèi)前端常用的藍(lán)湖舉例，在前端界面選定元素后，右邊界面會(huì)顯示該元素的CSS規(guī)則。

使用時(shí)，不需要了解設(shè)計(jì)系統(tǒng)，只需要一鍵復(fù)制CSS規(guī)則，再粘貼到項(xiàng)目中就行：

藍(lán)湖界面

這個(gè)操作邏輯完美契合了「語(yǔ)義化CSS」規(guī)范，簡(jiǎn)單高效。

而「原子化CSS」的本質(zhì)是建立在設(shè)計(jì)系統(tǒng)的基礎(chǔ)上。比如說(shuō)在TailwindCSS中要定義顏色，需要通過(guò)類似text-red-50、text-red-100這樣的類名，每個(gè)類名對(duì)應(yīng)了設(shè)計(jì)系統(tǒng)中一種定義好的顏色：

顏色約定

字體大小、間距、布局等也是同樣的道理：

字體大小約定

所以，如果公司采用了上述這套「對(duì)前端屏蔽設(shè)計(jì)系統(tǒng)」的開發(fā)流程，那么TailwindCSS無(wú)疑會(huì)增加前端的負(fù)擔(dān)。這種負(fù)擔(dān)的增加體現(xiàn)在：

• 需要學(xué)習(xí)TailwindCSS，從「語(yǔ)義化CSS」轉(zhuǎn)換到「原子化CSS」。
• 需要學(xué)習(xí)設(shè)計(jì)系統(tǒng)的知識(shí)。

更關(guān)鍵的是，后續(xù)接手的前端也得重新學(xué)一遍。

所以，如果這個(gè)開發(fā)流程不是公司自上而下規(guī)定的，就很難在團(tuán)隊(duì)推廣開。

相對(duì)的，下面這幾種情況比較容易接受TailwindCSS：

• 公司層面定義的開發(fā)流程中，設(shè)計(jì)師、前端工程師都要懂設(shè)計(jì)系統(tǒng)。

這種情況下，設(shè)計(jì)系統(tǒng)本身就是設(shè)計(jì)師與前端工程師之間的共同語(yǔ)言，就不需要再經(jīng)過(guò)設(shè)計(jì)工具（比如藍(lán)湖、Figma）翻譯成「語(yǔ)義化CSS」給前端：

• 沒(méi)有專門的設(shè)計(jì)師（比如獨(dú)立開發(fā)者或小公司），前端需要承擔(dān)設(shè)計(jì)工作。

這種情況下，TailwindCSS自帶的設(shè)計(jì)系統(tǒng)能提供基本的設(shè)計(jì)約束。比如，不知道該選多大的字體時(shí)，只需要從如下幾個(gè)類中選個(gè)合適的即可：

總結(jié)

學(xué)習(xí)TailwindCSS不僅僅是從「語(yǔ)義化CSS」到「原子化CSS」的思維轉(zhuǎn)變，更是需要了解設(shè)計(jì)系統(tǒng)的概念。

如果習(xí)慣了「對(duì)前端屏蔽設(shè)計(jì)系統(tǒng)」的開發(fā)流程，要接受TailwindCSS需要一個(gè)自上而下的流程。

從趨勢(shì)來(lái)看，TailwindCSS被接受程度也是逐年提升：

但我預(yù)測(cè)，這種增長(zhǎng)趨勢(shì)在未來(lái)某個(gè)時(shí)間點(diǎn)后會(huì)指數(shù)上升。這是因?yàn)椋磥?lái)大部分的項(xiàng)目初始化代碼會(huì)交給chatGPT完成，而「原子化CSS」相比「語(yǔ)義化CSS」能用更少的字符表達(dá)更豐富的樣式信息。舉個(gè)例子，對(duì)于下面的聊天消息卡片：

用「語(yǔ)義化CSS」表達(dá)，字符串長(zhǎng)度是1033：

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

用「原子化CSS」表達(dá)，字符串長(zhǎng)度是339：

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

屆時(shí)，當(dāng)公司自上而下推進(jìn)「chatGPT生成代碼」時(shí)，「原子化CSS」更省token。

而剛才已經(jīng)說(shuō)了，要接受TailwindCSS（或者說(shuō)背后的「原子化CSS」）需要的正是自上而下推動(dòng)，這就是一個(gè)重要契機(jī)。

而在眾多「原子化CSS」方案（比如還有UnoCSS）中，tailwindCSS發(fā)布時(shí)間最早（2017年），遠(yuǎn)早于GPT4用于訓(xùn)練的最晚數(shù)據(jù)集時(shí)間（2021.9）。這意味著GPT4在生成tailwindCSS代碼時(shí)會(huì)更熟練。

屆時(shí)，tailwindCSS為代表的「原子化CSS」將會(huì)大放異彩。