Css 实用程序 class 性能

Question

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

有什么更好的方法？

一个 - 使用一堆实用程序 class 制作您的 html 元素，例如：

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

Two - 让你的 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

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

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

使用 @extend 或等价物从例如生成时可能会导致巨大的文件SASS 因为规则的选择器变得庞大且包含许多子句。在创建样式时经常使用 @extend 通常是不好的做法，因为混合通常是有利的。

如果您曾经在 CSS 的网站上打开过开发者工具，例如网格元素全部由扩展选择器组成，然后当浏览器试图管理选择器时性能很糟糕。

我不是说不要使用扩展，但应该谨慎使用。

如果您需要经常使用这些实用程序 classes 并且有一个预处理器供您使用，那么您最好制作 flex 和 textRight 混入和只是 @include 它们位于您想要那些相应样式的位置。这将为您提供最佳的 CSS 输出，因为预处理器可以压缩规则并防止重复。

如果您不使用预处理器，您也可以使用 HTML 中定义的实用程序 classes。它仍然胜过内联 css 来应用一个小规则，例如text-align.

Css utils class performance