95%[1] of all browsers can handle variables. So it is not necessary to repeat in the classes the same definition of a variable and use it in addition to the variable.
An example: (before)
.btn.small font-size: clamp(1.42rem, calc(-0.07vw + 1.44rem), 1.35rem);
font-size: var(–text-s);
padding: clamp(1.02rem, calc(0.35vw + 0.91rem), 1.4rem) clamp(1.28rem, calc(0.65vw + 1.07rem), 1.98rem);
padding: var(–space-xs) var(–space-s);
}
Here is the cleaned example:
.btn.small font-size: var(–text-s);
padding: var(–space-xs) var(–space-s);
}
This shrank the style.css from 107 Kb to 69 Kb. The number of lines decreased from 4124 to 3394 lines.
This makes everything more maintainable, scalable and accessible
I only used the default settings for this, which are given when a new project is created.