title: “不在 CSS 中使用 ID 的原因”
發表：真實
描述：“為什麼我在編寫 CSS 時更喜歡使用類別而不是 ID。”
標籤: CSS, html, sass
有時，當我審查程式碼時，我建議同事不要對 CSS 樣式選擇器使用 ID，並且不可避免地會被問到原因。就像早上 6 點在黑暗中排隊、泡杯茶或化全臉妝一樣，我不假思索地就避免了 CSS 中的 ID。我已經這樣做了很長時間而沒有質疑它，以至於我花了一分鐘才向其他人解釋為什麼。因此，考慮到這一點，以下列出了我避免在樣式表中使用 ID 而更喜歡使用類別的原因。
1.類別特異性低於ID特異性
ID比類別具有更高的特異性。類別本身不能覆蓋屬於 ID 的樣式。要「擊敗」ID，您需要更多 ID 或使用!important ，這可能會在樣式表中引發特異性戰爭。您甚至可能需要重構您的 HTML。理想情況下，樣式應該易於覆蓋和擴展，以使您的 CSS 可維護且易於使用。
-
類別可以重複使用
ID 在頁面上應該是唯一的。這意味著，如果您將樣式附加到 ID，您將無法在同一網頁中重複使用它。然而，類別可以出現在同一頁面上的多個 HTML 元素上。能夠重複使用樣式是 CSS 的優點之一。例如，僅使用 ID 直接設定清單元素<li>樣式是很困難的。誠然，並不是每種樣式都需要重複使用，但有這個選擇還是很不錯的。
-
一致的約定
對於在程式碼庫中工作的開發人員來說，了解 CSS 附加到類別以及 ID 用於其他目的會更簡單。僅使用class屬性來定義樣式比使用class和id屬性的組合更容易讓其他人理解。
-
一個元素可以有多個類，但只能有一個ID
您可以為 HTML 元素新增許多類，例如<div class="text-bold banner-text js-banner-text"></div> 。這裡有用於樣式化的類別和用於 JavaScript 掛鉤的類，所有這些都在 class 屬性中分組在一起。也可以使用這些約定來命名 ID，但請記住，每個元素擁有多個 ID是無效的。這表示您不能像上面的類別範例一樣重載 ID 名稱，例如<div id="text-bold banner-text js-banner-text"></div> 。
使用類別的組合來設定元素的樣式是一種常見的模式。此外，最好對僅由 JavaScript 或自動化測試使用的選擇器使用命名約定。例如，如果我看到以js-為前綴的類，我就知道它在 JavaScript 中的某個地方使用，並且不負責樣式，因此在編輯它之前應該小心謹慎。 （通常qa-前綴也用作測試的鉤子。）我個人喜歡將所有鉤子和樣式類別放在一個屬性中，而不是在類別和 ID 之間共用它們。
免責聲明
當然，這個建議附帶了通常的免責聲明。您比任何隨機部落格文章更了解您的程式碼和問題的上下文，如果您認為使用 ID 編寫 CSS 有意義，那麼請繼續使用 ID。 ID 在 CSS 樣式表中使用是完全有效的。
筆記
這並不是說您不應該在 HTML 中使用 ID。除了是 CSS 選擇器之外，ID 在網頁中還有許多用途。例如，作為頁面錨點、片段標識符或將標籤連結到表單欄位。
聚苯乙烯
在研究這篇文章時，我發現了這個 StackOverflow 答案，它建議使用 ID 來定義樣式 - 一個很好的提醒，前端 Web 開發中的流行觀點可能會改變！
原文出處：https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式