10 個 CSS 小技巧

type

status

date

slug

summary

10 個 CSS 小技巧

💡一項投票調查中，關於 Web 開發人員合作中使他們最痛苦的技術，CSS 位居榜首。

CSS 確實臃腫且難以全面學習，但這只是因為它在過去 25 年間不斷發展。它出現在 1996 年，netscape 那時還是 top 級別的瀏覽器。而如今 RWD ( Responsive Web Design ) 的想法也已有十多年，越來越多瀏覽器進入市場，它們又以不同方式去呈現 CSS。這導致 code 在一個瀏覽器中會運作，另一個又不運作，使得開發人員就必須在代碼中編寫一堆令人困惑的供應商前綴。

我也知道大家為何討厭 CSS，所以我今天會介紹幾個最近在做 side project 查資料時，看到國外大佬使用的一些 tips，或是我這一路上的所學。讓我們學習用現代功能編寫乾淨的 CSS，同時避免 3202 年還在編寫一些意義不明的💩。

📖 學習 Box Model

當你剛開始學習 CSS 時，先不要急著用 bootstrap 或 tailwind 這樣的框架。它們確實非常 sexy，可以快速幫助你獲得一個漂亮的 UI。但在你的 project 中使用這類東西，你不會學習到真正 CSS 基礎知識。當哪天你主意變了，想轉換框架了，你還必須歷經離婚一般的痛苦。

當你好好去學習 CSS 的基礎，你將能更好更自由的去控制你的 code。

開始說回第一個標題。在我剛開始學習 CSS 時，我收到其中一個最好的建議就是去學習 Box Model，因為當你確實了解了這東西，這個語言中的其它所有內容對你來說，才會開始變得更有意義。

關於 Box Model，你可以先把每個 HTML 元素都視為一個 box，每個 box 都有自己的 width 和 height，你可在 box 周圍添加 padding 去擠壓 content。在 box 外部可以添加 border，而周邊還有個不可見的範圍叫做 margin。這邊我只是簡單的帶過，畢竟面向初學者的教程這部份是必講的，更詳細的內容去搜索引擎輸入關鍵字去了解吧。

CSS 中與佈局和位置相關的所有內容都受到 Box Model 的影響，所以關於如何應用就顯得更為重要。

打開現代主流瀏覽器的開發人員工具基本上都有圖化形界面可以參考。

這時候就引出了第二個我要講的重點。

📖 調試時使用 Firefox

在調試時我通常不會選擇用 Chrome，Firefox 的開發人員工具更為優秀，尤其是涉及 CSS 時。當你在檢查一個元素時，能像在 chrome 中那樣細分 Box Model，甚至也可以直接在上頭編輯屬性，而 Firefox 也會回饋給我影響 Box Model 的所有屬性的詳細信息。

它還在 HTML 中提供了一些有料的註釋，例如當一個元素使另一元素溢出時會有 overflow 標記。

它也還為 flex 和 grid 佈局提供了很好的圖形。

📖 Flexbox 好棒棒

而關於佈局和元素間的定位，歷史上一直是 CSS 最具挑戰性的方面之一。就像現在我問你如何在水平和垂直方向居中一個 div 這種老掉牙的問題，請問閣下如何實現？

一種方法是給 child 絕對定位，然後用 top 和 left 屬性把它移動到右下角，然後反向平移 50% 讓它回到中間。但這種方法非常不直觀，也讓看的人也覺得這孩子腦袋是不是有病。 (雙關😁)

而更好的方法就是使用 Flexbox ，就相當於給 div 一個 x、y 軸，當你想要置中時就讓它沿著水平軸和鉛直軸對齊就好了。

雖然 Flex 佈局用起來挺簡便的，但如果你今天遇到一個很龐大還很複雜的 UI，它的一個主要缺點就出來了。許多相交的行與列，會使你 HTML 中出現很多容器或包裝元素。而這些元素沒有語意意義，它們就只是待在那裡減少你熒幕的閱讀空間。

📖 Grid 好棒棒

幸運的是，關於上述的問題，Grid 佈局可以幫你解決。它不像 Felxbox 只能處理單獨的行與列。而它呈現上看起來像舊時代的 table layout。

你若使用 grid，你的 code 會相對友善一些。你可以將 children 定義為一堆列元素，行列寬度使用 template-columns 和 template-rows 定義。這裡註意一下 fr ( fractional unit ) 值，它會與 grid 中其它列元素共享可用空間。我們還可以定義一些行，grid 內元素都將自動定位。和 Flexbox 或 table layout 相比，能減少許多 HTML 和 CSS 的 code 數量。

📖 Clamp 夾爛它

前面講了一堆關於佈局和定位的東西，而當我們在實現 RWD 時，我們要因應用戶的設備螢幕可用空間調整畫面呈現。這時候有很多方式能做到這點。

例如你可能有一篇文章，它首選寬度為 50%。但在小螢幕上，你可能會希望它寬度固定在 200px。而換到大螢幕時，又希望它固定在 800px。你可以透過 media query 來實現。

但唯一的缺點是，media query 會讓你在 project 變大時想自殺。

但好消息是你可以透過使用 min、max、clamp 之類的函數去改寫它，使它變得簡潔利落。

📖 用 emoji 挑戰你的同事與上司 (讀到這了，休息一下吧)

當你的 className 長到你想死的時候，不妨試試看用 emoji 代替。為你煩躁的一天增添些許樂趣。

📖 使用 Aspect Ratio

如果你曾经不得不编写一个保持一定宽高比的 RWD 图片或影片，这东西会make u shock😮

例如今天你想放一個 16x9 的影片，你可能會被迫寫出一個像這樣的鳥東西。

這時候，你可以使用 aspect-ratio 這屬性。

但有個缺點是有些老地方不一定支援這屬性，這部分就只能自己斟酌了。

📖 創造變量

除了減少代碼量，更重要的一點是讓 code 更靈活，這樣在改寫和重構時才不會讓人想死。一種方式是用 CSS 自定義屬性和變量。像下列 code 中，我們在多個地方使用了相同顏色，當我們想更改顏色時，你會開始想鑽個洞把自己埋進去。

而更好的方法是在 root 選擇器上定義一個全局變量，然後在需要的地方進行引用。

你甚至可以在 tree 更深的的地方重新定義去 override。

亦或分解組合成得更細。

📖 花式 calc

現在 CSS 不是傳統意義上的編程語言，但它確實能夠使用 calc 函數進行基本運算。了解這點的你，現在你可以快樂的和小學生一起做算數題了。

單位甚至不用相同。

更酷的是，你可以這樣做動畫，就能在不增加 CSS 代碼的情況下實現相同效果。

📖 狀態管理計數器

雖然剛才說 CSS 不是一種編程語言，但它實際上有一個內置的狀態管理機制，你可以追蹤你 code 中的運行記數，而不用多編寫一行 JavaScript。

若你想對標題進行編號，最白癡的方法就長這樣。

當你突然想要從中間補上一個新的標題時，就會有種想去頂樓自由落體的感覺。

聰明的方法是去 root 創建一個計數器，用 counter-reset 給一個你喜歡的名字，然後在需要應用的地方去用 counter-increment 遞增它，它將從 0 開始將 1 添加到 dom 的每個 h1 元素。

📖 focus-within 的魔力

構建複雜下拉式選單時，你可能會認為這必須涉及一些 JavaScript 來管理選單的開啟和關閉 state，但你可能也會想你若只透過純 CSS 可以做到多遠。

大家都很熟悉 focus 這偽類，當你進行表單輸入或單擊按鈕時，該偽類會應用於元素上。問題是，在構建下拉式選單時，你可能會使用 focus 打開選單，但當你點擊選單內的某個內容時，它會失去焦點並關閉。這就為何你會使用 JavaScript 去管理 state。

但有趣的是，有個偽類叫做 focus-within，如果任何 children 也有這偽類，它就會保持 active 的狀態。

這樣簡單的一個功能，可以多減少幾行用於管理打開和關閉 state 的 JavaScript 代碼。

:📖 結語

這樣，我們就簡單提完了幾個 CSS 技巧。還記的剛開頭提到的瀏覽器供應商前綴嗎，那東西就像皰疹一樣不會消失。但幸運的是我們有些有料的小工具可以讓它變得不成問題。

其中一個工具就是 PostCSS (看起來像光明會來的)，它使用一個叫做 auto prefixer 的工具，來自動添加所有供應商前綴。此外，它還允許你使用現代 CSS 功能，會幫你自動轉換代碼，以盡可能讓所有目標瀏覽器都支援。

讀完這篇文章的你，日後還可以去看看 Sass、stylus、less 等預處理器，那部份之後有緣我會再分享的。