建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
10年積累的成都網站設計、成都做網站、外貿網站建設經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站策劃后付款的網站建設流程，更有滕州免費網站建設讓你可以放心的選擇與我們合作。
從17年誕生至今，社區(qū)對TailwindCSS的接受程度不斷提升：
一些使用過他的程序員大呼真香，而另一些程序員一聽到他宣揚的「原子化CSS」理念就表示不能接受。
同樣是程序員，為什么分歧這么大？這篇文章會分析問題形成的原因，給出建議，并預測TailwindCSS未來的走勢。
原子化CSS vs 語義化CSS
這篇文章不是TailwindCSS的科普文，但為了文章的完整性，有必要先介紹下TailwindCSS的核心理念 —— 「原子化CSS」。
元素樣式是由一條條CSS規(guī)則構成的。對于「如何組織CSS規(guī)則」，可以分為兩個流派：
- 語義化CSS（Semantic CSS）
- 原子化CSS（Atomic/Utility-First CSS）
先說「語義化CSS」，他很好理解，以下面這個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);
}即使我們沒有其他信息，光看這段代碼，也可以大體判斷出 —— 這是一個聊天通知卡片的樣式。
所以，對于采用「語義化CSS」規(guī)范的項目，重點在于「如何為組件定義語義」。這就誕生了很多「類名定義規(guī)則」，比如，下面是BEM(Block Element Modifier)規(guī)范的定義：
- Block：塊。
- Element：元素，是塊的組成部分。
- Modifier：修飾符，表示一種形態(tài)/狀態(tài)。
對于「警告狀態(tài)的聊天通知卡片」，符合BEM規(guī)范的類名為.chat-notification--warning。
「原子化CSS」則更關注CSS本身，上述聊天通知卡片用「原子化CSS」表達如下：
...其中每個class代表一個定義好的CSS規(guī)則，比如：
- p-6代表padding: 1.5rem; /* 24px */。
- bg-white代表background-color: white。
對于用慣了「語義化CSS」的開發(fā)者，一時是很難接受「原子化CSS」的。在他們看來，這就是開歷史的倒車，還得額外記憶各種類名的含義。
之所以造成這種誤解，是因為這里有個很重要的因素被忽略了 —— 設計系統。
設計系統
在互聯網公司，頁面的產出流程一般如下：
- 設計師根據公司需要，定義一套設計系統
- 根據設計系統的規(guī)范，設計師使用工具設計頁面
- 前端工程師根據工具的標注，產出頁面
所謂「設計系統」，就是對項目視圖各個部分的約定，比如：
- 布局約定
- 配色約定
- 尺寸約定
為了減少前端工程師的上手門檻，這套頁面產出流程對前端隱藏了設計系統的存在。
以國內前端常用的藍湖舉例，在前端界面選定元素后，右邊界面會顯示該元素的CSS規(guī)則。
使用時，不需要了解設計系統，只需要一鍵復制CSS規(guī)則，再粘貼到項目中就行：
藍湖界面
這個操作邏輯完美契合了「語義化CSS」規(guī)范，簡單高效。
而「原子化CSS」的本質是建立在設計系統的基礎上。比如說在TailwindCSS中要定義顏色，需要通過類似text-red-50、text-red-100這樣的類名，每個類名對應了設計系統中一種定義好的顏色：
顏色約定
字體大小、間距、布局等也是同樣的道理：
字體大小約定
所以，如果公司采用了上述這套「對前端屏蔽設計系統」的開發(fā)流程，那么TailwindCSS無疑會增加前端的負擔。這種負擔的增加體現在：
- 需要學習TailwindCSS，從「語義化CSS」轉換到「原子化CSS」。
- 需要學習設計系統的知識。
更關鍵的是，后續(xù)接手的前端也得重新學一遍。
所以，如果這個開發(fā)流程不是公司自上而下規(guī)定的，就很難在團隊推廣開。
相對的，下面這幾種情況比較容易接受TailwindCSS：
- 公司層面定義的開發(fā)流程中，設計師、前端工程師都要懂設計系統。
這種情況下，設計系統本身就是設計師與前端工程師之間的共同語言，就不需要再經過設計工具（比如藍湖、Figma）翻譯成「語義化CSS」給前端：
- 沒有專門的設計師（比如獨立開發(fā)者或小公司），前端需要承擔設計工作。
這種情況下，TailwindCSS自帶的設計系統能提供基本的設計約束。比如，不知道該選多大的字體時，只需要從如下幾個類中選個合適的即可：
總結
學習TailwindCSS不僅僅是從「語義化CSS」到「原子化CSS」的思維轉變，更是需要了解設計系統的概念。
如果習慣了「對前端屏蔽設計系統」的開發(fā)流程，要接受TailwindCSS需要一個自上而下的流程。
從趨勢來看，TailwindCSS被接受程度也是逐年提升：
但我預測，這種增長趨勢在未來某個時間點后會指數上升。這是因為，未來大部分的項目初始化代碼會交給chatGPT完成，而「原子化CSS」相比「語義化CSS」能用更少的字符表達更豐富的樣式信息。舉個例子，對于下面的聊天消息卡片：
用「語義化CSS」表達，字符串長度是1033：
ChitChat
用「原子化CSS」表達，字符串長度是339：
ChitChat
You have a new message!
屆時，當公司自上而下推進「chatGPT生成代碼」時，「原子化CSS」更省token。
而剛才已經說了，要接受TailwindCSS（或者說背后的「原子化CSS」）需要的正是自上而下推動，這就是一個重要契機。
而在眾多「原子化CSS」方案（比如還有UnoCSS）中，tailwindCSS發(fā)布時間最早（2017年），遠早于GPT4用于訓練的最晚數據集時間（2021.9）。這意味著GPT4在生成tailwindCSS代碼時會更熟練。
屆時，tailwindCSS為代表的「原子化CSS」將會大放異彩。
網站名稱：想明白這點，就知道 TailwindCSS 適不適合你
網頁網址：http://m.jiaoqi3.com/article/cdcceco.html
