[Groxx]

Your HTML is still undeniably larger than something with dramatically fewer class attributes though, if you minify the same way. Hence my "single page" vs "many" difference.

gzip helps for sure, but I doubt `<class="card">...` ends up larger than `<class="a b c d e"><class="sub-a sub-b q etc"><class="repeat per element">...`.

[axyz]

there is of course a bit of difference in some use cases, my point is that in a real world scenario you often do not have

<class="card"> vs <class="a b c d e">

but more something like <class="card"><class="stuff-inside-card"><class="other-stuff">

vs <class="a b c d e"><class="b c f"><class="c d e g">

so in the long run you tend to have more repeated strings across even completely unrelated elements and that usually balances out the possible increase in non gzipped bytes. But to be honest we did not had a detailed comparison with edge cases and it would be interesting to see when it actually may be a bad idea and when it is totally fine

[Groxx]

when you're less "component-y" with your styles, yeah, that happens pretty frequently. careful styling is mostly rare (like all careful things)... but atomic styling seems to make the savings of careful styling effectively impossible, though I absolutely believe it helps the less-careful (especially the least-careful) cases.