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

CPHPython

I am in a conundrum: the stylelint rule "selector-max-universal": 0 is required and, at the same time, I need to provide a default font family to text elements within a certain class.

Therefore I am not able to use this:

* { font-family: Somefont; }

And, at the same time, code review requested me not to use these kind of selectors (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 are conditionally applied through JS to a container element, e.g.:

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

Additionnaly, these fonts families should be set globally in one file and only once per each theme class, guaranteeing that other theme font families are not shown...

Can anyone see a way to workaround this problem?

Zdravko Pernikov

If I understood correctly you can just set the font families directly to .theme-a and .theme-b e.g.:

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

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

The children of those elements should inherit the fonts automatically if something doesn't overwrite them. There's no need of setting each element manually.

Collected from the Internet

Please contact [email protected] to delete if infringement.