nowadays is quite rare to write classes in pure html, using any framework like react, vue and similar we are used to pass classes in a JS environment. Obscure and minified class names can be imported from a package using a perfectly meaningful name, also the same set of classes can be exported with many different names to even better usage specificity with no cost in size.
We overcome most of those issues using a mix of postcss compose and css modules with a custom hashing solution based on the actual css rule content, this allowed us to have virtually infinite semantically named components with a css bundle size that tend to stabilize around 20/25kb gzipped for a very big e-commerce use case and I doubt any other use case would go much higher than that size.
https://github.com/utilitycss/atomic
If you want to have a look (documentation needs some love, but the samples generated by the init do give a good idea of the concept)
We overcome most of those issues using a mix of postcss compose and css modules with a custom hashing solution based on the actual css rule content, this allowed us to have virtually infinite semantically named components with a css bundle size that tend to stabilize around 20/25kb gzipped for a very big e-commerce use case and I doubt any other use case would go much higher than that size.
https://github.com/utilitycss/atomic If you want to have a look (documentation needs some love, but the samples generated by the init do give a good idea of the concept)