如何在没有通用选择器的情况下设置 global/default 字体系列？

Question

我遇到了一个难题：stylelint rule "selector-max-universal": 0 是必需的，同时，我需要为某个 class.[=16= 内的文本元素提供默认字体系列]

因此我不能使用这个：

* { 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-...

Theme classes 有条件地通过 JS 应用到容器元素，例如：

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

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

谁能找到解决此问题的方法？

Answer 1

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

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

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

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

如何在没有通用选择器的情况下设置 global/default 字体系列？

How to set a global/default font-family without universal selectors?

css

sass

stylelint