作為前端開發者，你有冇試過寫 CSS 時，為咗小小嘅排版問題而煩惱半天？例如 box-sizing 不一致導致佈局崩壞，或者重置樣式浪費太多時間。AllThingsSmitty 嘅 css-protips 就係一個免費 GitHub 開源項目，專門收集咗一系列實戰技巧，幫你避開常見陷阱，讓 CSS 寫得更專業高效。呢個資源特別適合初學到中階開發者，無論係自學定團隊項目，都能快速應用，提升代碼品質同開發速度。
用 CSS Reset 確保跨瀏覽器一致性
瀏覽器預設樣式總係帶來麻煩，不同平台嘅 margin 同 padding 差異大，容易令佈局失真。css-protips 建議一開始就引入 CSS Reset，例如 Normalize.css 或簡單自訂版本，將所有元素重置到統一起點。呢個做法唔單止節省 debug 時間，仲能讓你專注核心設計，而唔使擔心瀏覽器差異。開源項目入面提供咗實例代碼，直接 copy 落去用，適合新手快速上手。
繼承 box-sizing 統一元素尺寸計算
預設情況下，box-sizing 係 content-box，width 只計內容寬度，padding 同 border 會額外加落去，經常導致總寬超出預期。css-protips 教你加一行全局規則：* { box-sizing: border-box; }，由根元素 html 繼承落去，所有子元素自動套用。呢個技巧特別實用喺響應式設計，無論桌面定手機，都能保持佈局穩定。開發時打開瀏覽器 dev tools，一睇就知尺寸計算變得簡單可靠。
相比傳統逐個元素設定，呢種繼承方式更簡潔，減少代碼量。項目入面仲有詳細解釋點解 border-box 係現代標準，幫你理解背後原理，而唔止係抄代碼。
用 unset 代替重置所有屬性更精準
有時你只想清除特定樣式，但 reset 會抹走所有屬性，造成不必要麻煩。css-protips 推介用 unset 屬性，它會根據上下文還原到預設或繼承值，例如 input { all: unset; } 之後再加需要嘅樣式。呢個方法喺現代瀏覽器支援良好，特別適合表單元素或複雜組件，避免過度重置帶嚟嘅副作用。
:not() 選擇器輕鬆控制導航邊框應用
導航選單常見問題係最後一個 li 唔想要右邊框，但傳統 nth-child 寫法繁瑣。css-protips 展示用 :not() 解決：nav li:not(:last-child) { border-right: 1px solid #ccc; }，直觀又易讀。呢個技巧延伸到其他列表場景，例如卡片組或麵包屑導航，都能即時應用。
另外，檢查字體本地安裝可用 @supports 規則，例如 @supports (font-variation-settings: normal) { } 確保 fallback 方案。body 加 line-height 規則如 line-height: 1.5 更能改善整體可讀性，特別喺長文頁面。
整體嚟講，css-protips 唔係理論書，而係一本實戰手冊，每個 tip 都有代碼片段同解釋，star 數過萬證明其價值。無論你係 freelance 定公司開發，都值得 bookmark 落嚟，隨時參考提升 CSS 功力。
產品名稱：CSS Protips / css-protips
官方網站：https://github.com/AllThingsSmitty/css-protips
