#CSS

共 11 篇

從全域 CSS、預處理器、BEM 到 CSS Modules、CSS-in-JS、Atomic CSS 與 Zero Runtime，每一代方案都在解作用域、複用性、可維護性這三題。這篇講每一代解掉什麼、留下什麼代價，以及不同專案型態該怎麼選。

tailwind 幾乎成了 Atomic CSS 的標準，但它跟 UI Library 其實不太合：無法動態拆 CSS Chunk、掃描原始碼需要曝露、變數架構更隱晦。

CSS 的色彩系統進步飛快，color-mix 讓半透明疊色和 CSS 變數混搭終於可行。但致命缺點是不能 transition，算出來的顏色也不好預期。

兩個實際踩到的瀏覽器差異：Firefox 裡 absolute + inset 對 input、img 這類無結尾標籤會失效；webkit 裡 flex-shrink 的壓縮效果也會失效。

手機版把文字壓到 12px、間距縮到最小，只為了塞更多東西，對使用者本身就是負擔。業主要「一個畫面看到全部」，但你的 TA 到底是誰？

網頁字體是個大坑。這篇從「字體檔到底是什麼」講起：它像一組組向量的 image sprites，粗體斜體的排列組合是指數增長，中文字又特別肥大。

styled components 終止更新，進入長期維護階段，這件事社群沸沸揚揚。有人說，這件事代表的是一代技術的興衰，隨著 Atomic CSS 的興起，逐漸大家捨棄了原本 cssinjs 的方案。也有人說，與其使用 runtime

沒什麼人敢說自己精通 CSS，但 CSS 很強也不等於商業價值高。這篇講為什麼 CSS 的問題多半是「知不知道」而非熟練度，並列出六個有鑑別度的題目。

四五年前 SASS 是處理 CSS 的主流手段，現在趨勢往 Atomic 靠攏，Global CSS 因為反查太難而逐漸被淘汰。這篇聊 SASS 使用率一路下降的原因。

在 Vue 裡處理 CSS 的幾種解決方案速記：HOC、Sass Mixin、Global Sass 與 Component Wrap。

動畫的本質是處理每一個影格該長什麼樣子。這篇講 Reflow 與 Repaint 的差別（連「取得」尺寸都會觸發），以及為什麼實作動畫最好脫離框架直接操作 DOM。