1

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

但我也读到应用多个类也会损害性能。

这里推荐的做法是什么？

4

1 回答 1

3

我也有这个问题，经过一些研究，我发现了一篇关于CSS 渲染速度的帖子 - Forrst 上的分组选择器与属性。

虽然作者比较了 CSS 中分组选择器与属性之间的区别，但我想知道在元素上使用多个类应用样式是否更快……所以我做了一个测试，作者运行了它，结果发现它更快在您的 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-09T20:51:13.033 回答