Css utils类的性能

Question

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

什么是更好的方式？

一个 - 使用一堆utils类来创建你的html元素，如：

<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 
}

Answer 1

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

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

使用@extend 或等效文件可能会导致从例如SASS因为规则的选择器变得庞大而且有许多条款。 在创建样式时通常使用@extend通常是不好的做法，因为mixins通常是有利的。

如果您曾在使用CSS的网站上打开开发人员工具，例如网格元素都包含扩展选择器，因此当浏览器尝试管理选择器时，性能非常糟糕。

我不是说不使用延伸，但应该谨慎使用。

如果您经常需要使用这些实用程序类并且可以使用预处理器，那么最好制作flex和textRight mixins并且只需@include它们你想要那些相应的风格。这将为您提供最佳的CSS输出，因为预处理器可以压缩规则并防止重复。

如果您没有使用预处理器，那么您也可以使用HTML中定义的实用程序类。仍然使用内联css来应用一个小规则，例如： text-align。