Because why would you care about caching static assets like CSS files in the browser, right? Loading all that data every time the page loads makes a developer's life easier and we don't care about users and their bandwidth obviously. Hmm. Perhaps if you're David Nicholas Williams, but not if you're me. I only want users to have to download things they need once.

I've been experimenting with a sort of hybrid model of dynamic CSS recently levaraging CSS variables. Most of the styling work is done in static CSS files for things that won't change (because caching is good), and those styles are applied to components with classes. The dynamic bits are also defined in CSS, but populated with CSS variables that have values set inline in the components. A trivial example would be;

    .panel {
      flex: 1;
      background-color: var(--themeBackgroundColor);
    }

    <Panel className="panel" style={{'--themeBackgroundColor': `${userDefinedColor}`}} />

I don't really know if this approach is better than either plain CSS or styled components yet but it has solved some relatively complicated issues I was having with calculating positions of things and needing waaaaaay too many classes.