什麼是代碼重複CSS在我的網站

Question

說，正確的方法，還有就是我希望我的文字進行着色#f00

如果我要對付它們的多個地方，我應該做一個聲明，同時定位到一切例如

a, .color, h2 { 
    color: #f00 
} 

或者，當我將它們定位到它們時，我應該「塗上」它們嗎？

a { 
    padding: 5px; 
    color: #f00; 
} 

.color { 
    background: #333; 
    color: #f00; 
} 

h2 { 
    font-size: 20px; 
    color: #f00; 
} 

我無法知道它做的，當然，在這個isntance第一部分看起來像更少的代碼，但後來我比較引用標籤比我需要。但另一方面，我使用3次而不是1次使用color: #f00。

我很欣賞既不是「錯誤」，我只是想知道如果一個更快，更多的語義或什麼。

注意：這不是我的代碼在任何網站，只是一個快速模擬。我正在尋找更大規模的答案

Answer 1

第一個是首選的方法。通常情況下，開發人員的目標是儘量減少CSS大小，以鼓勵更快的加載。由於將類組合在一起，你的第一個例子肯定會佔用更少的空間。

Answer 2

我認爲這主要是一種風格選擇，但我會告訴我如何處理它。

如果有什麼東西所有這些情況的共同點在於暗示他們應該始終具有相同的顏色，然後它們組合在一起。

但是，如果有他們所共有的東西，這意味着你應該或許能給這一共性的名稱，並使其成爲一個類名。然後將樣式分配給班級。這是很好的模塊化。

如果它只是一個偶然的機會，他們有相同的顏色，你很可能會改變一個不改變其他人，使用第二種形式。

希望的答案是正確的，但除非有一個巨大的樣式，比如這個號碼，我懷疑它要對加載時間產生顯着影響。

我還沒有玩過LESS，我不知道它是否會自動優化它。

Answer 3

第一個選項應該是最好的，在這個意義上，如果你寫更少的代碼，而如果你想到處更改此顏色爲另外一個，你就會有一個單行改變。

但最後，這對使用第二種方法更有用。

如果你還想在任何地方改變這種顏色，最簡單的編輯器將允許你輕鬆地做到這一點。但是如果你想改變一個div的顏色，你需要移動你的代碼。

好的做法（使用第二種方法），是引用所有使用的顏色在你的主css文件（在評論）的頂部，那麼你可以很容易地選擇一個搜索/替換所有匹配。