是CSS星号是一种很好的做法

Question

我正在研究一个Angular应用程序，并且有一个CSS规则：

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

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

Answer 1

由于样式的层叠性质，使用 body { font-family: Roboto, Arial, Helvetica, sans-serif; }足以使每个子元素都继承字体家庭。这不会在选择器中创建定义的新实例。

`f使用通用选择器* { font-family: Roboto, Arial, Helvetica, sans-serif; }它为每个元素创建一个新的选择器。

尝试使用Universal Selector时的浏览器中的差异，并与Inspector一起检查每个元素。

您绝对应该使用继承。通用选择器将不必要地"污染"您的元素。

通用选择器的常见用例正在为每个元素和伪元素分配替代框模型：

*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

Answer 2

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

我最近看到了一篇视频或博客文章（我不记得我的一生），该文章首先用html { ... }编写CSS，然后让* { ... } Asterisk atterisk sasenit 其中一些其中一些样式可以使您的性能提高稍好。

所以，如果您要拥有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; }