CSS選擇器樣式？

Question

有時我發現自己爲單個元素創建CSS類。相反，我可以使用一個ID併爲此ID設置一個規則。哪種方式更適合風格？

Answer 1

如果樣式只是指一個，唯一的元素，基於ID選擇器是最合適的。

如果樣式引用多個元素，使用類。

要牢記的另一件事是基於ID的選擇器比基於類的選擇器具有更高的優先級。這有助於如果您的任何獨特的ID'd元素繼承了更通用的，基於分類的規則的樣式。

Answer 2

沒有硬性的就這一個快速的規則，這是因爲很多有關：

• 你爲什麼要使用樣式
• 你在做什麼
• 你要去哪裏

比所涉及的元件的數量多。

Answer 3

我會說，這更是一個人，通過人的偏好。

對我來說，我嘗試着提前想：我會在一個頁面上創建其中的兩個嗎？如果答案甚至含糊其詞地說「是」，那我就用課堂。如果我看不到需要創建第二個特定元素，我將使用ID。

就ID本身而言，我嘗試將其命名爲我不會與之衝突的內容。舉例來說，我會選擇這樣的：

#aboutus_team_wrapper {} 

它的長和醜陋，但我確切地知道它是，在這裏我使用它，我知道我永遠不會創造的東西，與衝突名稱。

希望這有助於！

Answer 4

我更喜歡在頁面中重複使用最重要的元素，例如本頁面上的Stackoverflow徽標（以及所有標題）。

如果元素不是頁面特定的，可以在不同的頁面之間重複使用CSS類，也可以在同一頁面中多次使用CSS類。

Answer 5

不要忘了選擇特異性！我儘可能避免使用ID選擇器。

參考：http://www.w3.org/TR/CSS2/cascade.html（6.4.3）

一個ID選擇比類選擇強10倍。這意味着您將不得不使用11個類選擇器來取消ID選擇器，否則您必須將相同的ID選擇器附加到您編寫的每個CSS規則或我最喜歡的內聯樣式或！重要規則！

「但是爲什麼在我知道的元素上只使用一個類風格只會顯示一次？這就是ID選擇器的用途。」

由於ID選擇弄糟級聯。考慮下面的（非語義）代碼來說明這個說法。

<style type="text/css"> 
    #header a { /*Selector Weight: 101*/ 
     font-weight: normal; 
    } 
    .bold { /*Selector Weight: 10*/ 
     font-weight: bold; 
    } 
</style> 
<div id="header"> 
    <a href="#">Happily not bold.</a> 
    <a href="#" class="bold">Sadly, not so bold.</a> 
</div> 

<a href="#" class="bold">SO bold...</a> 

爲了使這項工作，你必須添加：

#header .bold { /*Selector Weight: 110*/ 
     font-weight: bold; 
    } 

太好了，現在我們有兩個大膽的類。你可以看到這會毀了你多快。想象一下，試圖在全功能的Web應用程序上處理這個問題。