Question

我正在使用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

但我也读到，应用多个类也会影响性能。

这里的推荐做法是什么？

Answer 1

我也有这个问题，经过一些研究后，我在福斯特发现了一篇关于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轻松选择所有“icon”元素。

重载类的样式将限制您使用该类的方式。

所有人都说，由于实际的浏览器渲染时间增量可以忽略不计，因此这个级别的优化应该集中在节省开发人员的时间上。

这里的答案也很合理：CSS - Multiple vs Single class on an element

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

1 个答案: