Search code examples
csssassstylelint

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


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?


Solution

  • 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.