Vercel 的 VP 在 2024 年如何寫 css #

前言 #

Lee Robinson 是 Vercel 的 VP，也是他們前端的 Team Lead，這是他的 youtube 頻道，一個叫How I'm Writing CSS in 2024的影片節錄。

體驗 #

使用者體驗 #

在使用者體驗上會關注在 CSS 部分有四點：

• CSS 檔讀取得越快越好，換句話說就是檔越小越好
• 除非 CSS 檔內容有改變，不然不應該重新下載，要設定適當的header跟檔名去做cache
• 網頁應該要有盡量小甚至沒有版面配置位置(layout shift)
• 字體的讀取應該越快越好，而且對 layout shift 沒什麼影響

開發者體驗 #

開發者會關注的 CSS 觀點

• 移除沒用的 CSS 樣式，移除空白跟壓縮 CSS 檔案，讓檔案變得更小
• 在 CSS 檔名會加上 hash，有效地使用 cache
• 把 CSS 檔合併在一起，減少網路請求
• 避免樣式的 class 命名重複
• 移除某些 UI 的時後，可以輕易地順便移除 CSS 樣式，就是避免樣式耦合在一起
• 比較容易去套用 Design system
• 在 IDE 中，可以有 autocompletion、linting 跟 typescript 支援
• 在 IDE 中能有錯誤的提示

CSS 在 2024 的發展 #

有提到幾個已經原生支援且很有用的 CSS 屬性

• CSS Nesting
• var 變數
• @container query
• :has()
• @support
  • 可以檢測瀏覽器是否支援某個 CSS 屬性

也有提到其他 key word

• Lightning CSS
  • 一個用 rust 寫的，速度超級快的 css compiler 工具
• The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache
  • 他非常推薦的性能優化的文章，又挖了一個坑，之後再寫這篇文章的節錄跟感想
• Streaming CSS
  • 他用 google 的 widget 舉例，google 並沒辦法事先知道使用者要搜什麼，會用到什麼 widget，而預先加載 CSS，而是根據搜尋的結果，透過 Streaming CSS 把適當的 widget 的 CSS，Inject 進來
  • 他有提到一篇文章，可以確定這又是另外一個重要的發展方向，又是一個坑，之後再補

建議 #

他對 CSS solution 的建議如下

• CSS Module
• Tailwind
• StyleX

CSS Module #

CSS Module 各 bundle 工具跟框架的支援度非常高，而且非常普遍

Tailwind #

有很多原子化的 utility 樣式，會 tree shaking，只留下有用到的 class，而且還會動態產生對應樣式的 class，缺點就是 class 常常又臭又長

最近社群剛好又在討論 Tailwind，重要連結備份一下，多看一些東西，之後再來寫感想

• 社群討論 1
• 社群討論 2
• 社群討論 3
• 邪魔歪道還是苦口良藥？Functional CSS 經驗分享
• 淺談 Atomic CSS 的發展背景與 Tailwind CSS
• Tailwind vs. Semantic CSS
  • 之前刷 nue.js 看到的

StyleX #

CSS-in-JS 的 solution 通常有兩個問題

• Performance
  • 需要做額外的開銷，把寫在 JSX 中的樣式轉成 CSS
  • 所以很多框架都漸漸的往 zero runtime 的 solution 靠攏，Tailwind 就是其中一個
• Compatibility
  • 很多 CSS-in-JS 套件，並沒有辦法完全支援 streaming CSS 的功能

StyleX 就是能解決以上的痛點，facebook 開源的 CSS 套件，而且還有更多feature

看起來應該是蠻值得投資的，但是那寫法還是不太喜歡，不得不講 JSX 讓生態的發展變得有點扭曲，所以後來才會出現 htmx 跟 nue.js 那種反思的產物