Ways to help you write better CSS

助教統整 n 個方法幫助你寫出更好的 CSS

#代碼品質

方法一：關心選取器權重比例與效能

過度深層的選取會使得 CSS 的權重比例變得很高，導致後續維護變得非常麻煩會需要覆蓋掉某些樣式，最後因為權重比例太高，就開始用 !important 來覆蓋掉原本的樣式。

如果一個 class 選擇器就可以選擇到你想要的元素，那何必要寫這麼多層增加閱讀難度與權重比例呢？在某些案例，過度的選取還會影響到效能，因為瀏覽器會需要花費更多的時間去解析該選取器。

/* ❌ Nope */
.navbar .nav-item .nav-link {
}

/* ✅ Yes */
.nav-link {
}

明確的選取元素會讓人感覺比較安心，較不會發生命名上的衝突，但在實際開發中，讀一長串且具體的選取器，不會比想一個良好的 class 名稱來得更快，如果對於命名上的衝突有擔憂，推薦可以參考 BEM 命名法。總結把握以下原則最好：

盡可能壓低選取器的權重比例
測試除錯時可以使用 !important🔗，但用於正式環境是絕對不能被接受的
不要使用 # 選取器🔗，因為相同名稱的 ID是不合規的語法，意味著 ID 選取器只可能使用一次，而且權重比例非常高不利於維護

方法二：避免追求過於花俏的選取方式

原因與方法一相同，盡可能的使用簡單、低權級的選取器來達成目的，並不是要說酷炫的選取器沒有學習的必要，而是在絕大多數時候一個簡單的 class 選取器可以滿足當下的需求，是最直白且最好維護的選擇，玩弄花俏的選取方式的同時，記得解決問題的方式要注重簡潔： KISS 原則🔗。

方法三：統一撰寫方式

/* Utility */
.flex {
  display: flex;
}

越來越多人擁抱撰寫 Utility 形式的 CSS 的習慣，但如果隨心所欲的混用 Utility 樣式沒有規劃，有很大機率會讓 CSS 變得很難維護。新手特別容易寫 Utility，因為可以像行內樣式一樣，不用考慮命名，直接用就生效，但這樣的習慣會隨著專案的規模變大而變得難以維護。

特別是對初學者，我還是提倡良好的命名網頁的重要性，如果你對 Utility 真的有興趣，可以參考看看我的另一個文章：不需要學 Tailwind 也可以用 Tailwind。

/* ❌ 混用 */
.p-1 {
  padding: 1rem;
}

.panel {
  border: 1px solid black;
  background-color: white;
}

/* ✅ 語意化 */
.panel {
  padding: 1rem;
  border: 1px solid black;
  background-color: white;
}

/* ✅ 通用類別 */
.p-1 {
  padding: 1rem;
}

.border {
  border: 1px solid black;
}

.bg-white {
  background-color: white;
}

方法四：不要再寫神奇數字了

神奇數字是指在程式中讓人無法理解其用途的數字，在早期 CSS 還沒有支援變數語法的情況下會改寫 Sass🔗 來使用變數，但現今 CSS 變數🔗 已經在各大瀏覽器中得到廣泛的支援，抽離出一些常用的樣式變數，並且在需要的時候引用，可以讓 CSS 的維護變得更加容易，隨著專案的規模愈龐大越應該避免散亂的變數出現在程式中。

可以參考看看以下我寫的時間軸範例，就使用了原生 CSS 與 Sass 的變數語法來管理各方面的變數，讓 CSS 變得更加容易維護：

方法四：使用恰當的單位

網頁設計常用的大小單位不外乎就是：px、rem、em、%、vw、vh 但要正確使用這些單位需要一定的經驗以及與網頁設計者有充足的溝通。簡單來說最常看到以下幾種錯誤：

寫定元素的尺寸：當撰寫響應式網頁的時候最好不要寫死元素的尺寸或是手動算 % 數，現在都可以使用 max-width、flex、grid 來自由的讓版面在小尺寸下也能合理的呈現
都使用 px 不使用 rem：rem 會是大多距離單位的好選擇，因為相比於 px ，它尊重用戶對瀏覽器尺寸的設定。但在要求精準細小的尺寸時，px 仍是很好的選擇

方法五：捨棄舊時代的網頁排版方法

如果沒有要維護老網站的需求，那麼就不要再用舊時代的方法來編排網站了吧！所謂的老方法像是：table🔗、float🔗、手動計算 % 數…… 改成擁抱 Flexbox🔗 與 Grid🔗，讓你的網站變得更加靈活，更方便維護調整。