客觀評價 增長趨勢比 vite 還猛的 TailwindCSS

前端小智 發表於 2022-06-20
人工智慧 CSS

作者:pxn > 來源:medium

有夢想,有乾貨,微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

前端社群常見的宗教戰爭文: TailwindCSS根本邪魔歪道, Class根本不是這樣用的, 看了真他媽一肚子火 —— 硬派本格 CSS/SCSS支持者

會有這樣的言論,也許是你日常的工作流程中,不適合用這樣的框架,又或許是你沒有客觀的理解過 TailwindCSS 的優點所以體會不到它的魅力。

先說結論:如果你是一個團隊做 SAAS 產品,需要在統一的產品風格主題上面展開,並且使用 React 之類可以模組化x元件的前端框架,那麼 TailwindCSS 會是很值得匯入的樣式解決方案。

命名

我發現對我來說,打斷心流狀態的往往是幫元件取名這件事,在傳統使用 CSS/SCSS 上,我需要停下來花時間想一組元件還有其子元件的 class name 命名,檢查會不會跟已存在的元件衝突,多這一個步驟其實對開發效率上來講是拖累的。

誠然,你可以透過 Nested classes / BEM 之類的一些命名策略來讓這樣的步驟有一致性並減少命名碰撞,但在寫 JS 部分的元件時候已經要命名元件/命名變數,命名東命名西了,很多時候你 CSS 也只是把 JS 定義的名字改改文字格式複制貼上

例如這邊有個元件 AwesomeCard

AwesomeCard -> .awesomecard
AwesomeCardIcon -> .awesomecard__icon
AwesomeCardBody -> .awesomecard__body
AwesomeCardButton -> .awesomecard__button

說穿了其實是浪費生命的重複動作。

下面還有一種情境的命名我也常常“頓爹”打斷我思路

<div class="flex items-center justify-between px-3">
  <div class="flex items-center">
    <Icon/>
    <span class="ml-1">Label</span>
  </div>
  <Caret />
</div>

有時候你會需要一些額外的 div 搭配 flex 來做佈局,例如上面的程式碼中,我想要 IconLabel 兩者垂直置中,這一組元件要跟 Caret 垂直置中並分別對齊左右邊界,轉成 CSS 你可能就需要用上好幾個 classes

<div class="btn__container">
  <div class="btn__leftgroup">
    <div class="btn__icon" />
    <span class="btn__label">Label</span>
  </div>
  <div class="btn__caret"/>
</div>

要額外命名 btn__container btn__leftgroup 會讓我很煩躁,這些步驟如果能省起來個人是覺得能大幅提升開發效率。

檔案之間的切換

另外一個影響工作心流的是分開的 HTML/JS/CSS 檔案 ,雖然說 separation of concern 是軟體工作中很重要的一個概念,但前端實務上,三種檔案的耦合度極高,通常改一者就必須改另外兩者,頻繁的切換檔案其實很沒有效率。

以 React 框架來說,已經讓 Html 整合到 JSX 當中,當你習慣了這樣的工作模式,你會想更進一步的把樣式定義也納進來,這也是為什麼會有各種 css-in-js 的解決方案,TailwindCSS 在某種程度上也算是 css-in-js 的一種,各種元件狀態邏輯,例如說點選之後改變文字/背景顏色,可以透過 JSX 直接切換 className 來實現 (搭配 classnames 這樣的 npm module 更是如虎添翼)

統一的風格樣式

如果是 SAAS 產品,你會希望整個團隊有一致的調色盤, 而字型大小,間隔,常用寬高等維持有限度的選擇,讓你在元件佈局上能更好的對齊,TailwindCSS 這點已經幫你把最常見的 text/bg color、font-size、spacing 都提取出來,框架初始自帶的設定已經十分夠用,通常只需針對產品品牌色定義色盤,其他引數要客制修改擴充透過設定檔也十分方便。

你可能會說,SCSS裡面我也可以定義各種變數啊,的確,但變成你要自己設立一套引數規則或是參考某個框架範本 (MUI/AntD/Bootstrap) 來實作。

然後又回到一個懶人想省打字的問題上了,究竟是

<div class="bg-gray-100">...</div>

還是

<div class="card"></div>
.card {
  background-color: $gray100
}

對我來說,差別其實蠻明顯的。

冗長的 class name

<div class="w-96 bg-white shadow rounded flex items-center">...</div>

通常反對 TailwindCSS 的正統硬派 CSS 使用者,最常攻擊的就是 Atomic utility classes 冗長的 class name,但這個透過 React 的元件封裝,其實根本不會是問題,通常你會把這些複雜度藏在可重複使用的元件中,實際上在開發的時候,程式碼往往是很清爽好讀的

例如底下一個 navigation 的元件,在 DOM tree 裡面長這樣

<ul class="flex">
  <li class="mr-6"><a class="text-blue-500 hover:text-blue-800" href="#">Link</a></li>
  <li class="mr-6"><a class="text-blue-500 hover:text-blue-800" href="#">Link</a></li>
  <li class="mr-6"><a class="text-blue-500 hover:text-blue-800" href="#">Link</a></li>
</ul>

可以把 li 給抽出來寫成獨立的元件

const NavItem = ({ href, children }) => <li class="mr-6"><a className="text-blue-500 hover:text-blue-800" href={href}>{children}</a></li>

如此一來,你的JSX原始碼就能整理成以下比較好讀的格式

<ul className="flex">
  <NavItem href="#">Link</NavItem>
  <NavItem href="#">Link</NavItem>
  <NavItem href="#">Link</NavItem>
</ul>

當然,前提是搭配 React 這樣可以輕易封裝組合元件的框架才能發揮最大功效,如果沒有用上類似框架,我也不能否認 atomic css 的 class 是真的很冗長難讀。

檔案更小的 Stylesheet

這點其實毋庸置疑,因為有很大部分的 Utility class 都是共用,沒有多餘命名,TailwindCSS 又自帶 Tree Shaking,不會產生沒用到的 class,整體的 CSS stylesheet 檔案可以壓到很小,瀏覽器載入超快速。

總結

老話一句,工具沒有好壞,只有適不適合,就我個人開發經驗,匯入 TailwindCSS 在 Developer Experience 上是頗受團隊好評的,近年 TailwindCSS 的竄起,如果它沒有解決一些痛點,又何來這麼多人吹捧?

如果只是心理過不去,還抱持著寫傳統 CSS 方法的驕傲與矜持,沒有客觀的去理解新工具以及其適用的場景,我是覺得蠻可惜的,畢竟用得好的話,它真的能為你帶來更好的生產力以及效率,團隊協作上面也因為有共同的標準而能夠和諧的運作,何樂而不為?

編輯中可能存在的bug沒法實時知道,事後為了解決這些bug,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug

原文:https://medium.com/@nightspri...

交流

文章每週持續更新,可以微信搜尋「 大遷世界 」第一時間閱讀和催更(比部落格早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文件,歡迎Star和完善,大家面試可以參照考點複習,另外關注公眾號,後臺回覆福利,即可看到福利,你懂的。

客觀評價 增長趨勢比 vite 還猛的 TailwindCSS