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