将样式应用于多个选择器或使用多个类。哪个有更好的表现？

我使用SASS，但实际上我的问题也适用于普通的旧CSS。所以我有这个类：将样式应用于多个选择器或使用多个类。哪个有更好的表现？

.some-icon { 
    background-image: url('data:image/png;base64, someBase64String'); 
}

所以，现在我在几个地方使用这个图标。我还需要编写一些额外的CSS，将它正确放置在应该出现的不同位置。由于我不想复制这个庞大的base64字符串，我想知道使用哪种方法。

要么使用SASS的扩展语法：

.use-case-a{ 
    @extend .some-icon; 
    margin: 10px 0 0 0; 
    ... 
}

编译CSS是这样的：

.some-icon, .use-case-a { 
    background-image: url('data:image/png;base64, someBase64String'); 
} 

.use-case-a{ 
    margin: 10px 0 0 0; 
    ... 
}

或者我应该这样写：

.some-icon { 
    background-image: url('data:image/png;base64, someBase64String'); 
} 

.use-case-a{ 
    margin: 10px 0 0 0; 
    ... 
}

，然后申请这两个类some-icon和use-case-a就可以了？

，我读了第一种方法的性能消耗： https://github.com/nex3/sass/issues/12

但我也读到应用多个类伤害表现了。

这里推荐的做法是什么？

来源

2013-01-24 Christoph

为什么你不基准它呢？ –

为了更好的表现什么？ Sass编译器，服务器，网络，浏览器......？ – BoltClock

是的，渲染速度。那么，是的，我可以基准，但我只是想知道是否已经有一个最佳实践意见:) – Christoph

我也有这个问题，经过一番研究，我在Forrst发现了一篇关于CSS Rendering Speed - Grouping Selectors vs Properties的帖子。

虽然作者比较了CSS中的分组选择器与属性之间的区别，但我想知道在元素上应用使用多个类的样式是否更快......所以I made a test,the author ran it表明使用多个在你的HTML类：

        1k  10k 
Grouping Selectors layout time ~12ms ~110ms 
Grouping Properties layout time ~12ms ~117ms 
Object Oriented CSS layout time ~11ms ~112ms 

Grouping Selectors DOM ready  ~50ms ~405ms 
Grouping Properties DOM ready ~64ms ~640ms 
Object Oriented CSS DOM ready ~47ms ~349ms 

Grouping Selectors file size  55kb 563kb 
Grouping Properties file size  93kb 943kb 
Object Oriented CSS file size  64kb 633kb

此外，当你在标记您的代码将更具可读性，可预测的，可维护，可扩展的，等等。当你阅读下面的代码中使用更多的类，你知道，这个项目是一个图标，它也是一个复选标记图标。

<div class="icon icon-checkmark"></div>

此代码还允许使用JavaScript轻松选择所有“图标”元素。

重载类上的样式将限制您可以使用该类的方式。所有说，因为实际的浏览器渲染时间增量可以忽略不计，在这个级别的优化应该集中在节省开发人员的时间。

这里的答案也相当稳健：CSS - Multiple vs Single class on an element

来源

2013-02-09 20:51:13

伟大的答案！谢谢！ – Christoph

将样式应用于多个选择器或使用多个类。哪个有更好的表现？

回答

相关问题