[class * =「custom-style-」]和「.this-class-is-default-style」之間更貴嗎？

我有幾分相似的風格，每個都有約6-7行代碼是一樣的，就像這樣：[class * =「custom-style-」]和「.this-class-is-default-style」之間更貴嗎？

custom-style-1 { 
    font-size: 12px; 
    color: red; 
    //Here come the specifics! 
} 

custom-style-2 { 
    font-size: 12px; 
    color: red; 
    //Here come the specifics! 
} 

custom-style-3 { 
    font-size: 12px; 
    color: red; 
    //Here come the specifics! 
} 
.. 
..

所以我寫了這一點，除了各階級的重複屬性：

[class*="custom-style-"], 
[class*="custom-style-"] { 
    font-size: 12px; 
    color: red; 
}

但後來想，爲什麼不只是寫另一個類：

.this-class-is-default-style { 
    font-size: 12px; 
    color: red; 
}

，只是將它添加到<div class="{list-here}">在HTML中。

哪一個在渲染時間方面更昂貴？另外，使用方法是否存在靈活性問題或缺點，而不是唯一的方法？

來源

2017-10-15 Daniel Moss

_「哪一個在渲染時間方面更昂貴？」 - 只有一些帶有小卡鉗和測量設備的怪胎纔會知道...對於其他人來說，這將不重要:) – CBroe

@CBroe I'我非常努力地優化eveything，盡我所能從一開始就學會以某種方式編寫代碼，JS也是，所以我感興趣:)也許有人知道答案。 –

你的實現也不完全正確。你有兩次'[class * ='custom-style - 「]''。其中一個應該是'[class^='custom-style - 「]'而另一個應該是'[class * ='custom-style - 」]''。請參閱https://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix/8588532#8588532 – BoltClock

第二種方法（使用沒有class*=...的特定類）可能更好，因爲瀏覽器不需要對所有類屬性執行包含搜索（但在大多數情況下性能增益應該可以忽略不計）。瀏覽器經過優化，可以找到一個css類作爲其正常情況。

但第二種方式更重要的是更多安全，因爲將不需要的class'es應用到元素的機會會更低。如果custom-style-的名字不是非常特殊和獨特的，它可能類似於您的css文件中的許多其他類名，這可能會在將來導致一些錯誤。

即使您選擇第一種方法，我建議您使用BoltClock指定的the method：[class^="custom-style-"], [class*=" custom-style-"] {...}以儘可能減少重疊的機會，並考慮類名可以在列表的開頭或中間。

來源

2017-10-15 06:39:07

Re：最後一段，因爲我現在已經指出了實現是不正確的。除了最極端的邊緣情況之外，我鏈接的正確實施對所有人都是健壯的。 – BoltClock

@BoltClock謝謝，編輯爲您的評論 –

[class * =「custom-style-」]和「.this-class-is-default-style」之間更貴嗎？

回答

相關問題