Question

我正在重新设计Angular应用的样式，并且有CSS规则：

 * {
   font-family: Roboto, Arial, Helvetica, sans-serif;
   }

我知道这基本上是将字体应用于DOM中的每个元素。我很好奇这是否是一个好习惯，即使这是我们将要使用的唯一字体。我将把字体移到全局SASS变量中，想知道我是否还需要打扰字体。

Answer 1

由于样式的级联性质，使用appcfg.py download_app --help就足够了，因此每个子元素都继承了font-family。这不会在选择器中创建定义的新实例。

Ì如果您使用通用选择器body { font-family: Roboto, Arial, Helvetica, sans-serif; }，则会为每个元素创建一个新的选择器。

尝试使用不同的浏览器，并在使用通用选择器时使用检查器检出每个元素。

您绝对应该继承。通用选择器会不必要地“污染”您的元素。

通用选择器的一个常见用例是为每个单个元素和伪元素分配一个替代的盒模型：

* { font-family: Roboto, Arial, Helvetica, sans-serif; }

Answer 2

使用*是个好主意，但在我给出的示例中，您不一定需要在其中使用font-family，而将*放入CSS的顺序很重要

我最近看了一段视频或博客文章（我不记得我的一生），该文章解释说，先用html { ... }写CSS，然后用* { ... }星号继承其中的某些样式会使您的性能提高一些。

因此，如果您要使用reset.css样式表，它可能看起来像这样：

html {
  box-sizing: border-box;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; outline: 0; }

CSS星号是一种好习惯吗

2 个答案: