将样式应用于多个选择器或使用多个类。哪个有更好的表现?
我使用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
但我也读到应用多个类伤害表现了。
这里推荐的做法是什么?
我也有这个问题,经过一番研究,我在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
伟大的答案!谢谢! – Christoph
为什么你不基准它呢? –
为了更好的表现什么? Sass编译器,服务器,网络,浏览器......? – BoltClock
是的,渲染速度。那么,是的,我可以基准,但我只是想知道是否已经有一个最佳实践意见:) – Christoph