2012-03-08 24 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