最近Tailwindcss頻繁出現(xiàn)在我的視野里，從單詞拼寫中看，多多少少與css有點關(guān)系。近幾年是JS框架大行其道，CSS方面少有新的框架出現(xiàn)。

昨天突然看到尤大神在Github上的動態(tài)，fork了該項目，看來馬上要火的節(jié)奏啊！

我們來看下這個tailwindcss究竟是個什么東西，有什么獨特的功能和優(yōu)勢，最重要的是能否給我們開發(fā)者帶來顯而易見的效率的提升。

首先看官網(wǎng)對它的定義

Rapidly?build?modern?websites?without?ever?leaving?your?HTML.

tailwindcss 基于比組件更小、更靈活的工具類思想的 CSS 框架。這個思想簡單來說就是用 class 保證靈活、便于自定義組件，而不是在組件基礎(chǔ)上實現(xiàn)個性化。

可以看到代碼的特點是一個Html標簽伴隨著一堆的CSS類，這種寫法好像也不陌生。就是將樣式封裝的粒度更細。所以很多人看到就說“這不就是原子類嗎？”。

我們先來看看Tailwindcss作者所談到的開發(fā)初衷，將CSS開發(fā)經(jīng)歷分為幾個不同的階段來講：

第一階段：語義化CSS

以 CSS 在 HTML 中的語義來命名 CSS 類名

缺點：HTML 達到了「分離關(guān)注」的目的，無需關(guān)心 CSS 了，但是 CSS 的結(jié)構(gòu)與 HTML 的結(jié)構(gòu)強耦合，幾乎就是 HTML 結(jié)構(gòu)的復刻。

第二階段：將「樣式（CSS）」與「結(jié)構(gòu)（HTML）」解耦

典型代表：BEM 方法論

實際工作中，面臨的兩難境地：語義化 CSS，

在內(nèi)容中立（content-agnostic）組件中，HTML 是獨立的，CSS 依賴 HTML，導致的結(jié)果：HTML 可以方便地調(diào)整樣式，CSS 不能方便地重用。

每個項目負責人都要意識到，「分離關(guān)注」并非是一個非黑即白的選擇，而是一個權(quán)衡（tradeoff），一邊是方便地調(diào)整樣式，一邊是方便地復用樣式。

考慮到：

HTML 是結(jié)構(gòu)化的信息，具有明顯的約束（如：標簽種類等）

CSS 是創(chuàng)造性靈感類信息，有極大的發(fā)散空間，達成相同效果有多種方式，無約束且易被濫用，被濫用后容易導致 UI 的不一致性

作者堅定的選擇

「方便地復用 CSS」，為 CSS 增加約束，提升 UI 一致性。

第三階段：內(nèi)容中立組件

一個組件做得越多，或者一個組件越具體，越難以復用

第四階段：內(nèi)容中立組件 + 功能類（utility classes）

通過細粒度的功能類的組合，可以有效去除 CSS 中的重復

第五階段：功能類優(yōu)先（Utility-first）CSS

將所有的 CSS 均由功能類組合而成，這樣做的好處是：對 CSS 的使用施加約束，有利于產(chǎn)生更一致的 UI，但是如果一個組件被多次使用，卻每次都要用功能類組合而成么？

原則是：

• 以功能類組合成組件

• 避免過早抽象
  注：這里有個很好用的規(guī)則：直到一個模式出現(xiàn) 3 次的時候，再考慮抽象成組件，而非像 BEM 等方法論所做的那樣，一開始就提供組件。

其實從我自己的開發(fā)經(jīng)歷來講，主要分為兩個時代，在這之前，編寫 CSS 被認為是在為 HTML 文檔進行排版。因此，“內(nèi)容（HTML）、樣式（CSS）、行為（JS）需要分離”這句話，連同著“CSS 代碼應當體現(xiàn) HTML 文檔結(jié)構(gòu)/語義”的觀念深入人心。因此大家一直習慣于：

• 為 HTML 文檔里的一些元素起一些所謂“能反映它在文檔里的角色/語義”的類名 / ID（例如 header、sidebar、menu、navbar 等等，甚至發(fā)明出 BEM 之類的“命名規(guī)范”），然后用類選擇器或 ID 選擇器來選中它們

• 偶爾搭配使用那些依賴于文檔結(jié)構(gòu)的 CSS 選擇器（后代選擇器、子選擇器、兄弟選擇器等等）

但是，在 近幾?年，沒有人還會認為自己在編寫 HTML 文檔，或者說，認為自己的 HTML 是所謂的“內(nèi)容”。HTML 實際上是類似于 GUI 像素 / 控件一類的東西，是組件的渲染產(chǎn)物。對于這種“渲染產(chǎn)物”，大家需要的是能夠方便地指定其外觀的方案，而不愿意再走“ 縱覽文檔結(jié)構(gòu) -> 為元素起名字 -> 用選擇器選中 -> 寫 CSS 語句”這套傳統(tǒng)流程：

• 由于組件化開發(fā)模式的推行，已經(jīng)不存在一個所謂的“文檔結(jié)構(gòu)”了（現(xiàn)在只有組件樹結(jié)構(gòu)，而且你通常不會在乎它），也就是傳統(tǒng)流程的第一步早已不復存在

• 為了消滅第二、三步， CSS-in-JS 開始流行起來

• 而 tailwind 這種原子類方案就更激進了，它不但跳過了傳統(tǒng)流程的前三步，連第四步都幫你簡化了（用一個簡短的單詞，也就是一個原子類，來代替一個 CSS 語句）

看了網(wǎng)上的開發(fā)者的評論，有人唱衰有人叫好，本人看來，一個東西的流行短時間可能是玄學，但是長時間流行的東西肯定是真的具有不可替代的優(yōu)勢。Tailwindcss也是如此，不要過早的判定一個東西的好壞吧，要結(jié)合時代趨勢來看。既然大神都fork了，還是先用用看吧。

總結(jié)

以上是生活随笔為你收集整理的Tailwindcss尤大神都fork了，是未来的趋势？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。