Html Css-utils类性能

我看到了css-utils类的趋势，我想知道这种风格是否会对性能产生影响

有什么更好的办法

One-使用一堆UTIL类创建html元素，如：

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

将输出：

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

---

基于您提供的两个示例，实用程序类几乎总是最佳解决方案

实用程序类的相应样式往往非常小，来自HTML的引用促进了这些定义的重用。从性能角度来看，它们的影响可以忽略不计，因为浏览器和散列中实现的复杂算法允许它们非常快速地引用规则和应用样式

使用

@extend

或等效工具在从例如SASS生成文件时，可能会产生巨大的文件，因为规则的选择器变得庞大，包含许多子句。 在创建样式时大量使用

@extend

通常是不好的做法，因为混音通常是有利的

如果您曾经在一个使用CSS的站点上打开过开发人员工具，例如网格元素都由扩展选择器组成，那么当浏览器试图管理选择器时，性能会非常糟糕

我并不是说不要使用extend，但应该谨慎使用

如果您需要经常使用这些实用程序类，并且有一个可供您使用的预处理器，那么您最好将

flex

和

textRight

混合，并将它们包含在您想要的相应样式中。这将为您提供最佳的CSS输出，因为预处理器可以压缩规则并防止重复

---

如果不使用预处理器，那么在HTML中使用已定义的实用程序类也可以。应用一个小规则（例如

文本对齐

）仍然优于内联css，但使用@extend可以避免代码重复。在考虑优化时，需要记住的一点是，代码的可读性和可维护性通常比微小的性能增益更重要。这也说明了实用程序类。

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