Question

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

为什么像Font Awesome和Bootstrap这样的CSS库会将Tick Trading_day mean_price std_price VOD 2013-1-2 30.23 0.13 VOD 2013-1-5 30.11 0.09 VOD 2013-1-6 30.24 0.15 ... ..... ....... ..... RBS 2013-1-2 15.23 0.19和fa等通用类与btn和{{1}等特定类结合使用}？为什么不直接将所有样式应用于特定类，因此您只能使用fa-gear或btn-primary？

由于这两个库都使用Less或Sass，因此可以使用扩展功能或mixins轻松地将常用样式应用于所有特定类。

Answer 1

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

另见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;
}

具体课程：

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

你能想象如果没有泛型类吗？ 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库使用泛型类和特定类而不仅仅是特定类

2 个答案: