Currently facing a dilemma: the stylelint rule "selector-max-universal": 0 is mandatory, while also needing to assign a default font family to text elements within a specific class.
This means I cannot simply use:
* { font-family: DefaultFont; }
Furthermore, code review discourages the use of such selectors (SCSS mixin) as well:
@mixin setGlobalFontFamily($family: DefaultFont) {
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label,
p {
font-family: $family, sans-serif;
}
}
// Font assignments are tailored for certain classes
.theme-a {
@include setGlobalFontFamily;
}
.theme-b {
@include setGlobalFontFamily(Roboto);
}
//.theme-...
Theme classes are conditionally applied via JS to a container element, for example:
<body>
<section class="theme-b">
</section>
</body>
In addition, these font families need to be globally set in one file and only once per each theme class to ensure that other themes' font families do not override...
If anyone has a solution or workaround for this issue, please share!