为什么 CSS 库使用通用的 class 和特定的 class 而不仅仅是特定的 class

Question

也许有一个我不知道的术语。我的 google 和堆栈溢出搜索没有任何结果，因为我不知道要搜索什么。

为什么像 Font Awesome and Bootstrap 这样的 CSS 库使用像 fa 和 btn 这样的通用 class 和像 class 这样的特定的 class fa-gear 和 btn-primary？为什么不直接将所有样式应用到特定的 class，这样您就可以只使用 fa-gear 或 btn-primary？

由于这两个库都使用 Less 或 Sass，它们可以使用扩展功能或混合来轻松地将通用样式应用到所有特定的 classes。

Answer 1

在 CSS 预处理器出现之前，人们编写了普通的旧 CSS。知道如何编写普通的 CSS 是为什么你不能只使用混合或扩展来实现你想要的东西的关键——你最终会得到一个巨大的样式表。见下文：

另见 DRY principle:

来源：

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

具体的class是：

.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}

你能想象如果没有通用的 class 吗？ CSS 会包含很多不必要的重复：

.fa-glass {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-glass:before {
  content: "\f000";
}
.fa-music {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-music:before {
  content: "\f001";
}
.fa-search {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-envelope-o:before {
  content: "\f003";
}

Answer 2

除了使用通用类时文件较小之外，这还使开发人员无需使用 less/sass.

即可更轻松地进行扩展

例如，我想创建一个按钮，我将在我的项目中创建一个带有 css 的 btn-foo，它可以从 btn 获取所有内容而无需我不用担心，我只需要 <button class='btn btn-foo' />

为什么 CSS 库使用通用的 class 和特定的 class 而不仅仅是特定的 class

Why do CSS libraries use a generic class and specific class rather than just a specific class

css

twitter-bootstrap

font-awesome