將樣式應用於多個選擇器或使用多個類。哪個有更好的表現？

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

將樣式應用於多個選擇器或使用多個類。哪個有更好的表現？

回答

相關問題