0

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?

CPHPython
  • 12,379
  • 5
  • 59
  • 71

1 Answers1

1

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.

dako
  • 1,081
  • 1
  • 12
  • 22
  • Long hours thinking on the subject made me blind to the simplest thing... You are right, I did not attempt to set a family rule in the themes themeselves and in some cases I had other files overriding some text elements. Appreciated. – CPHPython Mar 11 '20 at 12:10