Are there any CSS/styling frameworks out there that can work with semantic markup while keeping file sizes relatively small? It seems like a classic case of the "three options, pick two" dilemma.
Let me break it down. I want:
A visual styling framework that saves me from hand-coding everything
...that is compatible with simple, semantic HTML without cluttering the code with unnecessary class names just for styling purposes. In my opinion, markup should always be minimal, straightforward, and semantic. Something like this:
<div class="widget">...rather than this:
<div class="widget d-flex p-2 bd-highlight">...and one that doesn't bloat file sizes too much. Frameworks are generally lightweight on their own. However, to keep them slim, they require declarative markup. Pre-processors like Sass make it easy to inherit rulesets directly from frameworks. For example:
.widget { @extend .d-flex; @extend .p-2; @extend .bd-highlight; }But this approach can quickly result in larger file sizes due to an explosion in selector lists. Despite the tiny rulesets, the file size becomes colossal. I'm inclined to steer clear of this solution because of its impact on file size.
My instinct tells me that I have to choose between continuing to write CSS manually (giving up #1) or incorporating styles into my HTML (sacrificing #2).
Is there a way around this dilemma? Am I mishandling Sass? Are there other frameworks available that could solve this issue? While I primarily work with Sass and React, I'm open to exploring new options.