使用SASS时使用2类和`extend`的CSS性能？

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

这样做的好处是我现在只需要在我的HTML中调用glyph-1。

除了保持HTML＆＃34;更精简之外，SASS版本从开发的角度来看更具可读性和可维护性（IMO）。但是编译后的CSS肯定比较庞大（从人性角度看是没有意义的，因为正在使用SASS，但在浏览器方面可能很重要）。

使用一种方法与另一种方法有明显的性能问题，这可能会偏好首选方法吗？

Answer 1

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

• 使用@extend的单个类就像你的例子，你有一个包含基类样式的类型类。
• 多个类（又名链接），如下例所示

-

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

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

单班的方式很容易理解。

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

结合前者的优点的另一种方法是将修饰语的概念分为（变体，修饰语和状态）。所以请遵循this之类的内容。变量是一个类型，应该有一个，你会像你的字形类一样使用扩展。修饰符应该更新一些简单的属性。国家就像残疾人一样。

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

您可以添加简单修饰符：

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

您可以继续使用像字形示例中的变体类。