当使用SASS时，CSS的性能是使用2个类还是`extend`？

Question

在CSS中，创建基类和操作唯一值的类是很常见的。字体图标库就是一个非常常见的例子，比如Font Awesome：

<i class="fa fa-bicycle"></i>

这是有道理的，但当SASS进入画面时，您可以使用extend功能。

在SASS中：

%glyph {
  ... stuff ...
}

.glyph-1 {
  @extend %glyph;
  ... unique stuff ...
}

.glyph-2 {
  @extend %glyph;
  ... unique stuff ...
}

这将导致CSS类似于：

.glyph-1, .glyph-2, .glyph-<n> {
  ... contents of %glyph ...
}

.glyph-<number> {
  ... the unique stuff for each <number> ...
}

这样做的好处是我现在只需要在我的超文本标记语言中调用glyph-1。

从开发的角度来看，SASS版本更具可读性和可维护性(IMO)，此外，它还保持了HTML的“精简”。但是编译后的CSS肯定更笨重(对于人类来说毫无意义，因为使用的是SASS，但在浏览器端可能很重要)。

在使用一种方法与另一种方法时，是否存在明显的性能问题，这可能会影响首选方法？

Answer 1

我们可以考虑有两种方法来做到这一点：

带有@extend的

• 单个类类似于您的示例，其中您有一个包含基类styles.
• Multiple类(也称为链接)的类型类，如以下示例

所示

-

.button {}
.button--large {}
.button--primary {}

<button class="button button--large button--primary"></button>

单类方法很容易理解。

多类方法最适合具有多个修饰符的模块，这些修饰符被设计为混合和匹配。然而，它的一个问题是它是重复的，您需要注意修饰符类的顺序。

另一种结合了前面两种方法的优点的方法是将修饰符的概念分离为(变体、修饰符和状态)。因此，请关注this之类的内容。如果variation是一种类型，那么就应该有一种类型，并且您可以像使用glyph类一样使用extend。修饰符应该更新一些简单的属性。状态将类似于is-disabled。

所以我们得到了这两个好处：

您可以添加简单的修饰符：

<button class="btn -color-red -size-large -shape-round">

您可以继续使用variation类，就像您的字形示例一样。