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

Question

在元素上使用单个css类与倍数有什么性能提升？

例如: -

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

VS

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

Answer 1

如果你有一个甚至是中等复杂的样式表并且知道你在做什么,那么使用多个类就可以充分利用级联,这最终很可能意味着你的css文件会变小,因为你不会复制代码.因此,从这个意义上说,它实际上对性能有积极的影响(取决于你的css的复杂性).

我试图想象一下如果jQuery UI样式表使用每元素一类的方法,它会是什么样子.我想它的尺寸会翻倍.

当然像每个人都说的那样,影响是如此之小,你不会注意到.继续使用多个类并拥抱级联!

FWIW,我真的不喜欢类名no-padding,float-left和ui-corner-all.虽然它们对css作者有意义,但是每个声明结合多个元素的语义方法(以避免重复规则)几乎总是首选.使用第一种方法,如果您确定no-padding实际需要1px填充,那么您的css将毫无意义,并且a.classname.float-left实际上需要向右浮动.

Answer 2

从技术上讲,是较少的班级意味着更少的HTML数据传输.就CSS而言,需要针对每个规则检查每个元素,因此根据您编写的规则,更少的类可能意味着更少的匹配.

差异很小,不容易察觉.如果您正在填充包含数万个元素的页面,您可能会注意到性能差异,但无论如何这将是一个糟糕的设计选择.

我所关注的一个问题是你提供的例子.你的课程no-padding,no-margin描述的风格是一个坏主意.如果所有some-class元素都有no-margin类,那么margin: 0应该成为some-class规则的一部分.

不要为样式添加类,为类添加样式.

Answer 3

基本规则适用于CSS,就像其他语言一样:除非遇到严重的实际性能问题或拥有数万个元素,否则不要担心此级别的优化.使用更具可读性的东西.

可能存在差异 - 从性能角度来看,使用CSS选择器通常非常不理想.但与其他因素相比,任何差异都将是微不足道的.