如何在没有通用选择器的情况下设置全局/默认字体系列？答案

【问题标题】：How to set a global/default font-family without universal selectors?如何在没有通用选择器的情况下设置全局/默认字体系列？
【发布时间】：2020-03-11 11:23:13
【问题描述】：

我遇到了难题：stylelint rule "selector-max-universal": 0 是必需的，同时我需要为某个类中的文本元素提供默认字体系列。

因此我无法使用它：

* { font-family: Somefont; }

同时，代码审查要求我不要使用这些类型的选择器（SCSS mixin）：

@mixin setGlobalFontFamily($family: Somefont) {
  button,
  div,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  label,
  p {
    font-family: $family, sans-serif;
  }
}

// fonts are specific to certain classes 
.theme-a {
   @include setGlobalFontFamily;
}

.theme-b {
   @include setGlobalFontFamily(Roboto);
}

//.theme-...

主题类通过 JS 有条件地应用于容器元素，例如：

<body>
  <section class="theme-b">
  </section>
</body>

另外，这些字体系列应该在一个文件中全局设置，并且每个主题类只设置一次，保证不显示其他主题字体系列...

任何人都可以找到解决此问题的方法吗？

【问题讨论】：

标签： css sass stylelint

【解决方案1】：

如果我理解正确，您可以直接将字体系列设置为 .theme-a 和 .theme-b 例如：

.theme-a {
   font-family: 'Some Font', sans-serif;
}

.theme-b {
   font-family: 'Roboto', sans-serif;
}

如果没有覆盖它们，这些元素的子元素应该自动继承字体。无需手动设置每个元素。

【讨论】：

长时间思考这个主题让我对最简单的事情视而不见......你是对的，我没有尝试在主题本身中设置家庭规则，在某些情况下我有其他文件覆盖一些文本元素。赞赏。