CSS-元素上的多个类与单个类

在一个元素上使用单个css类与使用多个css类相比，是否有任何性能提升

例：-

vs

---

基本规则适用于CSS，就像其他语言一样：不要担心这一级别的优化，除非您遇到严重的实际性能问题，或者有成千上万的元素。使用更具可读性的内容

---

可能会有差异——从性能角度来看，以合理的方式使用CSS选择器通常是非常不理想的。但是与其他因素相比，任何差异都是微不足道的。

从技术上讲，是的更少的类意味着HTML的数据传输更少。就CSS而言，每个元素都需要根据每个规则进行检查，因此更少的类可能意味着更少的匹配，这取决于您编写的规则

差别很小，不容易察觉。如果用成千上万的元素填充页面，您可能会注意到性能差异，但无论如何，这将是一个糟糕的设计选择

我关心的一个问题是你提供的例子。您的类

无填充

，

无边距

描述了不好的样式。如果所有

some class

元素也有

no margin

类，那么

margin:0

应该是

some class

规则的一部分

---

不要为样式添加类，而是为类添加样式。

如果您有一个中等复杂的样式表，并且知道自己在做什么，那么使用多个类可以充分利用级联的优势，这最终很可能意味着您的css文件会变小，因为您不会重复代码。因此，从这个意义上讲，它实际上对性能有积极的影响（取决于css的复杂性）

我试着想象一下，如果jQueryUI使用每元素一个类的方法，它的样式表会是什么样子。我想它的尺寸会加倍

当然，正如大家所说，影响是如此之小，你不会注意到。继续使用多个类，拥抱级联

---

---

FWIW，我真的不喜欢像

无填充

，

左浮动

和

用户界面角全部

这样的类名。尽管对css作者来说它们是有意义的，但是语义方法与每个声明的多个元素相结合（以避免重复规则）几乎总是首选的。使用第一种方法，如果您决定

无填充

实际上需要1px填充，而

a.classname.float left

实际上需要向右浮动，您的css将毫无意义。

@Pekka-将此作为一个答案，我会+1。哦，还有另一个快速提示：不要做

“无填充”

，做

“无添加”

。对于大多数文本编辑器来说，选择包含破折号的单词是一件痛苦的事情。是的，这会提高性能。你会注意到吗？罗托拉：我不怪我的工具。我在考虑实用性。@Tomalak、CSS id和类通常是连字符的，就像CSS规则本身一样。为了与其他语言保持一致，CSS可能应该使用camelCase，但它没有。对于“数万”，我会在你的答案出现时写出相同的数量。另一方面，如果你在大量（数百/数千）HTML元素中添加两个或多个类，而不是一个，它可能会显著增加文档的文件大小。

<div class="single-class"></div>

<div class="no-padding no-margin some-class some-other-class"></div>