作者：DarkZone
鏈接：https://www.zhihu.com/question/19550864/answer/23440690
來源：知乎
鏈接：https://www.zhihu.com/question/19550864/answer/23440690
來源：知乎
以下摘自《精通CSS：高級Web標准解決方案第2版》，希望對你有用。
常常很難決定一個元素應該使用ID 還是類名。一般原則是，類應該應用於概念上相似的元素，這些元素可以出現在同一頁面上的多個位置，而ID 應該應用於不同的唯一的元素。但是，究竟哪些元素是概念上相似的，哪些元素是唯一的？
例如，假設你的網站頂部包含主導航，在搜索結果頁面的底部包含基於頁面的導航，在頁腳上還有另一個導航。是給它們分配不同的ID（比如main-nav、page-nav和footer-nav），還是都給它們指定nav類，然后根據它們在文檔中的位置應用樣式？我以前喜歡使用前一種方法，因為它的針對性更強一點兒。但是，這有幾個問題。如果我現在需要把搜索結果導航放在搜索頁面的頂部和底部，或者需要在頁腳中有兩級導航，那會怎么樣？如果使用大量ID，很快就會難以找到唯一的名稱，最終不得不創建非常長、非常復雜的命名約定。因此，現在我比較喜歡使用類名。只有在目標元素非常獨特，絕不會對網站上其他地方別的東西使用這個名稱時，才會使用ID。換句話說，只有在絕對確定這個元素只會出現一次的情況下，才應該使用ID。如果你認為以后可能需要相似的元素，就使用類。保持命名約定通用，並且使用類，就不會出現一長串ID選擇器都與非常相似的樣式相關聯的現象：
常常很難決定一個元素應該使用ID 還是類名。一般原則是，類應該應用於概念上相似的元素，這些元素可以出現在同一頁面上的多個位置，而ID 應該應用於不同的唯一的元素。但是，究竟哪些元素是概念上相似的，哪些元素是唯一的？
例如，假設你的網站頂部包含主導航，在搜索結果頁面的底部包含基於頁面的導航，在頁腳上還有另一個導航。是給它們分配不同的ID（比如main-nav、page-nav和footer-nav），還是都給它們指定nav類，然后根據它們在文檔中的位置應用樣式？我以前喜歡使用前一種方法，因為它的針對性更強一點兒。但是，這有幾個問題。如果我現在需要把搜索結果導航放在搜索頁面的頂部和底部，或者需要在頁腳中有兩級導航，那會怎么樣？如果使用大量ID，很快就會難以找到唯一的名稱，最終不得不創建非常長、非常復雜的命名約定。因此，現在我比較喜歡使用類名。只有在目標元素非常獨特，絕不會對網站上其他地方別的東西使用這個名稱時，才會使用ID。換句話說，只有在絕對確定這個元素只會出現一次的情況下，才應該使用ID。如果你認為以后可能需要相似的元素，就使用類。保持命名約定通用，並且使用類，就不會出現一長串ID選擇器都與非常相似的樣式相關聯的現象：
只需用一個普通的類替代它們：
由於類具有靈活性，所以它們是非常強大的。同時，它們也可能被過度使用或濫用。CSS新手常常在幾乎所有東西上添加類，從而試圖更精細地控制它們的樣式。早期的WYSIWYG編輯器也傾向於在應用樣式的每個地方都添加類。許多開發人員在使用編輯器生成的代碼學習CSS時繼承了這個壞習慣。這種現象稱為"多類症"（classitis），在某種程度上，這和使用基於表格的布局一樣糟糕，因為它在文檔中添加了無意義的代碼。
在前面的示例中，通過使用一個與新聞相關的類名，每個元素都被標識為新聞的一部分。這使新聞標題和正文可以采用與頁面其他部分不同的樣式。但是，不需要用這么多類來區分各個元素。可以將新聞條目放在一個部分中，並且加上類名news，從而標識整個新聞條目。然后，可以使用層疊（cascade）來識別新聞標題和文本。
只要你發現類名中出現了重復的單詞，比如news-head和news-link 或者section-head和section-foot，就應該考慮是否可以把這些元素分解成它們的組成部分。這會讓代碼更"組件化"，會大大提高靈活性。
以這種方式刪除不必要的類有助於簡化代碼，使頁面更簡潔。稍后，將簡要討論CSS選擇器和為樣式尋找目標。無論如何，這種對類名的過度依賴是完全不必要的。如果你發現自己添加了許多類，那么這很可能意味着你的HTML文檔的結構有問題。
由於類具有靈活性，所以它們是非常強大的。同時，它們也可能被過度使用或濫用。CSS新手常常在幾乎所有東西上添加類，從而試圖更精細地控制它們的樣式。早期的WYSIWYG編輯器也傾向於在應用樣式的每個地方都添加類。許多開發人員在使用編輯器生成的代碼學習CSS時繼承了這個壞習慣。這種現象稱為"多類症"（classitis），在某種程度上，這和使用基於表格的布局一樣糟糕，因為它在文檔中添加了無意義的代碼。
在前面的示例中，通過使用一個與新聞相關的類名，每個元素都被標識為新聞的一部分。這使新聞標題和正文可以采用與頁面其他部分不同的樣式。但是，不需要用這么多類來區分各個元素。可以將新聞條目放在一個部分中，並且加上類名news，從而標識整個新聞條目。然后，可以使用層疊（cascade）來識別新聞標題和文本。
只要你發現類名中出現了重復的單詞，比如news-head和news-link 或者section-head和section-foot，就應該考慮是否可以把這些元素分解成它們的組成部分。這會讓代碼更"組件化"，會大大提高靈活性。
以這種方式刪除不必要的類有助於簡化代碼，使頁面更簡潔。稍后，將簡要討論CSS選擇器和為樣式尋找目標。無論如何，這種對類名的過度依賴是完全不必要的。如果你發現自己添加了許多類，那么這很可能意味着你的HTML文檔的結構有問題。