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-要素の複数クラスと単一クラス

于 2013-02-09T20:51:13.033 に答える