HTML 大量使用 id 屬性的缺點：唯一性風險與樣式優先級污染

核心缺點

1. 唯一性難以保證： HTML 規範要求 id 在文檔中唯一。大量手寫或模板生成極易導致重複，造成 document.getElementById 只返回首個、標籤 <label for> 關聯錯誤、CSS #id 樣式意外覆蓋等難以排查的 Bug。
2. CSS 優先級過高： ID 選擇器優先級 (0,1,0,0) 遠高於類選擇器 (0,0,1,0) 和元素選擇器 (0,0,0,1)。大量使用 ID 寫樣式會導致後期覆蓋極難，需用 !important 或更高優先級選擇器，破壞樣式可維護性。
3. 語義化不足： ID 應用於頁面級唯一區塊 (如 #header, #footer, #main-nav)。重複性 UI 組件 (列表項、按鈕、卡片) 應用 class 配合 data-* 屬性標識。
4. JavaScript 耦合： JS 直接依賴 ID 選取元素，導致 HTML 結構變動即須改 JS。推薦用 querySelector 類選擇器或組件化框架 (Vue/React) 綁定。

最佳實踐

• 佈局級唯一容器用 ID (極少數)。
• 組件內部、列表項、可複用元素全用 Class + BEM 命名 (如 .news-list__item)。
• 需 JS 掛鉤時，用 data-testid、data-action 等語義屬性，而非 ID。
• CSS 僅用類選擇器，避免 ID 選擇器。