2012-03-08 26 views
5

我想知道下列哪個例子會表現更好。如果表現相同,哪一個更好?哪個更快:重複樣式或重複選擇器?

實施例1(重複選擇器)

.helpfulCommenter, .questionTroll { color: #f00; }

.questionTroll { text-decoration: line-through; }

實施例2(重複樣式)

.helpfulCommenter { color: #f00; }

.questionTroll { color: #f00; text-decoration: line-through; }

我知道的類名稱是不是語義的,這裏展示的特定風格是無關緊要的。我只想知道這些瀏覽器中的哪些瀏覽器可以更輕鬆地解析和實現。

+0

這可能會影響瀏覽器的性能,很大程度上取決於您擁有的元素和選擇器的數量。但最終,這裏的性能差異並不重要 - 選擇哪一個更具語義意義。 – 2012-03-08 02:54:21

+0

類名稱違反了最佳實踐(您正在將這些值(「紅色」,「粗體」)硬編碼到類名稱中)。你應該想出更好的(適當的)名字...... – 2012-03-08 02:55:22

+2

@ŠimeVidas:我確信這些只是他提出的例子。 – xbonez 2012-03-08 02:58:55

回答

2

性能差異非常小,無關緊要。

避開例2,因爲它很可能會在被濫用時變成維護頭痛。

+0

我就是這麼想的,兩者之間的差異更多地與代碼維護相關,而不是性能。如果我有很多需要共享樣式的類(> 50或甚至到數百),這同樣適用嗎? – Jason 2012-03-08 03:03:49

+0

@Jason:非常漂亮。 – BoltClock 2012-03-08 03:06:33

+0

@Jason它會不同於在不同的選擇器上定義相同的定義。如果你正確地設計你的CSS,你應該有層疊樣式,儘量減少重複和縮短StyleSheet。 – xandercoded 2012-03-08 03:10:18