在HTML元素中拥有许多类是不好的吗？

Question

在现代HTML编码中，常常给元素添加多个类名，例如

<div class="class1 class2 class3 class4 ..."
</div>

这使我们在不为不同类重复CSS属性的情况下具有极大的灵活性。

从逻辑上讲，浏览器会消耗更多资源来收集不同类的CSS属性并应用于相应的元素。

由于难以对此进行可靠的基准测试，因此我从理论角度提出这个问题。想象一下页面上的大多数HTML元素都有几个类（例如10个类）。这会使页面呈现更加困难和缓慢吗？这种减速是否明显且值得考虑？

通常，浏览器从不同的类中读取属性的共同过程是什么？

- Googlebot

---

http://webdesign.about.com/od/css/qt/tipcssmulticlas.htm - Morpheus

@Morpheus 这些链接介绍了一般的可能性（实际上我在问题中引用过）。没有涉及浏览器渲染性能的评论。 - Googlebot

有理由期望类的数量会产生任何可感知的影响吗？考虑到现代计算机的速度和网页上可能会使它们变慢的所有功能，这个问题听起来很牵强，并且没有好的推测理由。 - Jukka K. Korpela

@JukkaK.Korpela 这确实是我的问题。这种减速是否明显？有时候我们认为渲染问题并不是很明显，但在复杂的情况下，它们是真正的问题。 - Googlebot

我认为从理论上讲，渲染会明显减慢。但是正如 @JukkaK.Korpela 所说，现代计算机和浏览器速度非常快，可以忽略不计。此外，请记住，页面加载时，整个 CSS 文件也会被加载。最终，我估计可能会有0.2到0.5秒的减速。 - Edwin Lambregts

Answer 1

添加多个类的好处是可以为不同的样式分别创建不同的类，而不必为相同的用途重复创建新类。

例如，如果我有一个按钮，我可以有3个类，如.btn .big .grey。如果我想创建另一个按钮，我只需要重复使用 .btn 类，并添加其他自定义类，如.medium和.green。这被称为OOCSS（面向对象的CSS）。

关于性能问题，我建议您观看这个小例子http://www.css-101.org/descendant-selector/go_fetch_yourself.php，http://csswizardry.com/2011/09/writing-efficient-css-selectors，您可以找到很多关于ID与类在性能方面的文章。

- jeremybarbet

---

你的链接与CSS选择器有关，以及后代选择器如何影响性能。我的问题是关于单个类的。 - Googlebot

Answer 2

多个类可以更轻松地向元素添加特殊效果，而无需为该元素创建全新的样式。例如，您可能希望快速将元素浮动到左侧或右侧。您可以编写两个类“left”和“right”，其中仅包含“float:left;”和“float:right;”。然后，每当您需要浮动到左侧的元素时，只需将类“left”添加到其类列表中。

我喜欢使用多个类来保持整个站点的标准化。例如，如果我总是希望具有底部边距的元素的底部边距为10px。通过创建一个仅包含botom-margin:10px;的类，我可以在需要的任何地方添加它。

多个类的缺点是，虽然它们受到主要浏览器的支持，但旧版浏览器不支持它们。因此，您应确保列出的第一个类是该元素具有最具体信息的类。

随着您为元素应用越来越多的类，多个类也可能变得非常混乱。 更多信息... 总结：

• 减少选择器的总数（包括IE相关样式：.ie7 .foo .bar）
• 避免使用通用选择器（包括未经修饰的属性选择器：[type="url"]）
• 页面缩放会影响某些浏览器中的CSS性能（例如Opera）
• 窗口大小会影响某些浏览器中的CSS性能（例如Chrome）
• 页面重新加载会对某些浏览器中的CSS性能产生负面影响（例如Opera）
• “border-radius”和“transform”是最耗费资源的属性之一（至少在WebKit和Opera中）
• WebKit内核浏览器中的“Timeline”选项卡可以揭示总计算/重排/重绘时间
• 在WebKit中，选择器匹配速度更快

http://perfectionkills.com/

- Pramod Bhoi