我的最佳實務：CSS

1. 前言

如今 CSS 遠遠沒有被充分利用。Angular/React/Vue/... 開發者和 UI 設計師之間隔著一道鴻溝。

UI 設計師巢狀了三十層 <div>，上面掛著四十個 CSS class；而 Angular 開發者每隔兩週就為最新的函式庫興奮不已，可是他的相依性地獄早就少了 npm i --force 就建置不起來，因為各個 peer dependency 互相衝突。這位 TypeScript 狂熱者對 CSS 和 HTML 沒什麼興趣。就算是最簡單的輸入框，他也非用 Material 不可，因為他擔心不用的話就搞不定驗證。更何況誰也不想把時間浪費在重新發明輪子上。可是他沒有意識到：一旦遇到第一個函式庫無法滿足的需求，省下的時間就會全部賠進去，最後發現自己正在翻那個函式庫的 GitHub issues。

在全端專案裡做開發，很少有機會發揮自己身為前端設計師的本事。你拿到 Figma 裡的畫面設計稿，就得原封不動地實作出來。這類前端開發者大多根本沒意識到，只用一行 CSS 就能做出響應式版面。CSS 比以往任何時候都更強大。用 JS 硬改樣式、一大堆 media query 和 IE 8 相容寫法的時代已經過去了。萬歲！

2. 完美置中

面試時不一定討喜，但我自己樂在其中：每當被問到前端功力如何，我都喜歡回答：「喔，當然。我可以把一個 <div> 垂直置中。」

讓一個 div 置中，向來是出了名的難。

現在不再是了：

.parent {
    display: grid;
    place-items: center
}

3. 響應式網格

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. 響應式 Flex 版面

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. 頁面版面配置

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. 側邊欄

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. 致謝

1-Line Layouts