Css實用工具類的性能

-1

我看到了css utils類的趨勢，我想知道這種風格是否會影響性能。Css實用工具類的性能

什麼是更好的方法？

一個 - 讓你的HTML元素像一堆utils的類：

<div class="padding flex justifyCenter alignCenter textRight"></div>

兩 - 讓你的CSS（與像SASS預處理器）是這樣的：

%flex { 
    // code 
} 

%textRight { 
    // code 
} 

div { 
    @extend %flex; 
    @extend %textRight; 
} 

h1 { 
    @extend %flex; 
    @extend %textRight; 
}

威爾輸出：

div, h1 { 
// with flex and text right 
}

來源

2015-12-26 user233232

實用程序類幾乎總是基於您提供的兩個示例的最佳解決方案。

實用工具類的相應樣式通常非常小，而來自HTML的參考提示重用這些定義。從性能角度來看，他們的影響可以忽略不計，因爲在瀏覽器和哈希中實現的複雜算法使他們能夠非常快速地引用規則並應用樣式。

使用@extend或等價物可能會導致生成大文件（例如， SASS，因爲這些規則的選擇器變得龐大而且有很多條款。由於mixin通常是有利的，因此在創建樣式時通常很難使用@extend。

如果您曾經在包含CSS的網站上打開過開發人員工具，網格元素都包含擴展選擇器，然後當瀏覽器嘗試管理選擇器時，性能非常糟糕。

我不是說不使用擴展，但應該謹慎使用它。

如果你在哪裏，你需要經常使用這些實用工具類和在您的處置預處理器，你可能是最好做flex和textRight混入的情況以及您希望這些相應的款式只是@include他們。這將爲您提供最佳的CSS輸出，因爲預處理器可以壓縮規則並防止重複。

如果您不使用預處理器，那麼在HTML中使用已定義的實用程序類也可以。它仍然在節省內聯css來應用一個小規則，例如text-align。

來源

2015-12-26 16:38:39

但是使用@extend可以避免代碼重複。 – user233232

當考慮優化時，要記住一個重要的觀點，即代碼可讀性和可維護性通常優先於性能稍微小的增益。這也適用於公用事業類。 – Tuure

Css實用工具類的性能

回答

相關問題