Minimize code duplication

軟體開發最重要的二個原則是 DRY 和可維護性，同時也適用在 CSS
可維護性的程式碼以實際狀況來說，是在變更一個大型元件時減少需要編輯的地方
舉例來說如果要放大一個按鈕，需要在不同規則裡做10個編輯，很有可能你會漏掉其中幾個，尤其當你不是最初寫的那個人的時候
即使程式碼簡單易懂，最後你也發現那些需要編輯的地方，但你也花費了時間的機會成本

maintainability versus brevity

可維護性和簡潔有時是互不相容
雖然上面的寫法比較簡單
但是下面的寫法較易懂而且要變更 border width 只要改一個地方就好了

border-width: 10px 10px 10px 0;
---
border-width: 10px;
border-left-width: 0;

currentColor

可以說是第一個CSS變數
它和 color 的值一樣
許多 CSS 屬性顏色的預設值就是 currentColor

inheritance

任何屬性都可以使用 inherit
就會去跟父元素取該值

Trust your eyes, not numbers

有時再精確的計算看起來卻不正常
比如並列的相同大小正方形和圓形，圓形看起來就是比較小
這在視覺設計裡叫視覺幻象
我們在寫CSS時要對視覺平衡做調整，不要完全依賴數字

Use media queries right

在製作RWD頁面時不小心就多用了 media query
每增加一個 media query 就多增加未來在更動時的負擔，所以使用上要格外小心
Media query 應該是不得已而使用的最後手段

遵照前面提到的「減少重複程式碼」原則
這裡有幾個方法能避免不必要的 media query

• 使用百分比而不是固定的寬度。再不然就用相對的寬度像是 vw, vh, vmin, vmax
• 在大螢幕上要有一個固定寬度的元素時，使用 max-width，讓其不用media query就能自適應小螢幕
• 別忘了在 img, object, video, iframe 加上 max-width: 100%
• 當需要塞滿容元素的背景圖片時，使用 background-size: cover 讓圖片能保持原始比例。不過要考慮頻寬的問題，在行動裝置上使用高解析圖片不是明智的做法
• 製作 grid 物件時讓 viewport width 來決定每一列的數量。Flexbox或者 display: inline-block 就可以做到。
• 當製作多欄的的文字區塊時，設定 column-width 而不是 column-count，讓你在小螢幕上會得到一個欄位

總而言之，主要的原則是在 breakpoints 之間力求達成流動的佈局和相對的大小
當一個頁面設計是易適應的時候，加上幾個簡單的 media queries 就可以解決，當你發現你的 media queires 已經太多的時候，是應該回去檢視一下你的程式碼架構

Use shorthands wisely

下面二行CSS是不相等的

background: rebeccapurple;
background-color: rebeccapurple;

上面永遠給你一個背景是 rebeccapurple 的東西
下面那個你不知道會不會突然多了漸層，或者在 background-img 裡多了一張小貓的圖片

所以使用 shorthand 是一種防禦的技巧
讓你的程式碼完成度更高
即使未來WG新增了屬性也能保護你的程式碼不受影響

而 longhand 結合 shorthand 也是一個不錯的寫法

background: url(tr.png) no-repeat top right / 2em 2em,
			  url(br.png) no-repeat bottom right / 2em 2em,
			  url(bl.png) no-repeat bottom left / 2em 2em;

在上面這個例子 background-repeat 和 background-size 重複了三次
我們能運用CSS list expansion rule 簡化成這樣

background: url(tr.png) top right,
			  url(br.png) bottom right,
			  url(bl.png) bottom left;
background-size: 2em 2em;
background-repeat: no-repeat;