前幾天才看到一篇文章You Don’t Need A UI Framework,一位需要在一個產品一再重複打磨的 in-house 外國工程師,出來講說大家做產品不應該用 Bootstrap, Material UI, Ant Design 之類的 UI Framework,讀了之後有點夏蟲語冰之感,工作型態百百種,就像一個不愁吃穿做興趣的私廚出來分析說早餐店不該用料理包、組合肉、現成化工調味料,不該用水果茶粉/奶茶粉來泡飲料、所有食材要當天採買的,要為客人的健康和餐飲業的未來發展著想 blahblah…
過沒幾天就在FB討論區看到一篇,一位從臉書個人檔案看起來是這個月在某上市櫃公司上班沒幾天的人,發文說改樣式改到火大。
一看 html 的截圖非常精彩,一個看起來像是應該要做水平捲動清單的東西,設了一大堆 Atomic CSS/Functional CSS 邏輯的 css className,還指名 Tailwind 這個現在很熱門的 CSS framework 出來罵。
從截圖可以發現一些值得討論的但從截圖短短幾層 html makeup 就可以看到一些值得討論的,像是:
- 有一堆
b1600, b1920, b429, b588, b868, b1366, b2209, b2618
….這個我記得 Tailwind 本來是沒有的,應該是原 PO 的前人重新定義了一堆名稱用來當 breakpoint 用的? 而且要定義這東西還不是寫在CSS裡面,而是另外寫在tailwind.config.js
。另外可以外層容器上看到,不同可視區域寬度時上邊距會改變、清單項目的寬度會從一排6個…..一直到變成螢幕 4/5 寬度,除了 breakpoint 不知道裡面還定義了什麼好東西。
這種命名邏輯的問題,大概就是未來某一天如果有新需求,例如某某寬度的時候標題或文字段落結尾不要落一個字,那是否又要再多一個 b350 之類的去控制文字尺寸或字距,還是讓 b429 對應到的不是 429px? 還是又要動 html,加上其他的 classList 名稱呢? - 從
class='border-r-8 border-l-8 border-solid border-b-0 border-transparent'
不知原 PO 的前人為何要用透明的左右框線來當成清單項目的左右間距,而不是用 margin, padding, gap 之類比較普遍的作法,要是遇到那層 div 又要設框線樣式,或是 background, box-shadow 的樣式,豈不是很麻煩嗎?
而且要用 js 取寬度做一些功能的話,offsetWidth 跟 getComputedStyle 含 border 寬度,clientWidth 不含 border 寬度,網頁寫到一半可能又稍微再卡了一下。
var item1 = document.getElementById("item1");
alert(item1.offsetWidth+","+item1.clientWidth+","+getComputedStyle(item1).width);//得到三個不一樣的數值 - 有些設定似乎是多餘的,外層都已經設 flex 了,whitespace-nowrap 跟內層的 inline-block 應該可以拿掉了。但也有可能是為了不要讓不支援 flexbox 的瀏覽器顯示時爆掉,才加的 fallback?
- 對完全沒用過的人來說,改網頁時要怎麼知道哪些名稱是 Tailwind 內建的,哪些是前人另外寫的? 例如在深色背景介面時,
text-red-600
跟text-red-700
哪個顏色比較亮?border-r-8
的 8 是什麼單位? 8%? 0.8%? 8px? 某種 rem+calc 的算式? 要增加樣式規則時,要怎麼很快知道Index of CSS properties – w3c 上的幾百個 css 屬性,或是一些特殊的 selector,哪些名稱在 Tailwind 有內建,哪些又要自己另外寫?
還有這種現代 css framework 用了很多 CSS variablesvar(--xxx)
的寫法,會不會改一下變數,又讓不知道哪邊的東西壞了? 還是為了保險起見,自己再取一個新的 CSS 變數名稱來用? 這樣又回到本段一開始的問題,怎麼知道哪些名稱是 Tailwind 內建的,哪些是另外寫的?
名稱加得越多,就大大增加了開發與維護的成本,要改一個網頁,不只要看 CSS, html,還要多開一個查 tailwind 文件的視窗。而且搞不好 CSS 裡面還定義了一堆.page-home .mt-4
跟.page-product .mt-4
,不只同一個 mt-4 在不同頁面會有不同數值,還一堆樣式寫在 mt-4 上面,只要想說要改一下上外距,改成 mt-3 然後世界就崩塌了…
當然有些是預想以後可能會發生的問題,但有些需求可能一輩子都不會產生。原 PO 壓根兒沒有具體列出他目前碰到那組 code,有遇到什麼想做但是做不出來的,想改但是改不動的?
只記得從一個留言回覆看到他說對於 div 上要要用偽元素設定一些樣式的時候,豈不是又要再取名字? …之類的,這點其實說得滿有道理,用這種 framework 看似可以稍微縮短盤古開天初期的混沌,多人協作時至少有個基本的準則,但為了需求或使用者體驗,最後還是免不了要自己寫樣式,然後後續走上又要整天想著要取什麼名稱、用 devtool inspect style 的老路。
對於像我手刻派,之前也碰過 Bootstrap 跟 Tailwind 的人來說,有些名稱其實滿直覺的。
但對於沒用過的人來說,或是之前在研究時,發現 Tailwind 官網文件有個問題,就是不少東西無法直接很快搜尋到?... 繼續閱讀⇢