[1] https://acss.io/
[1] https://acss.io/
The problem with the latter is you’ve coupled the styles to names embedded in the HTML which means a whole lot of grep and replace when things change.
Taking that further with actual custom values being applied in the class names in the view the way Atomic sounds like it’s taking that idea too far. Those values should be constrained the way it’s done in https://rebassjs.org/ where customization of base values is handled with CSS in JS.
The removal of unused classes can be achieved using tools like PurgeCSS https://www.purgecss.com/
Ultimately I’ve found Tailwind to have the best balance between a composable utility class base approach, with consistent base values, and a mature and good looking parent framework. Otherwise I’d go with one of the smaller utility kits mentioned above for simple projects.
I just checked one of our more recent projects and the resulting CSS is 2.4KB, about half of which is actually an SVG that's used in a background.
faster and more thorough than PurgeCSS (and all others).
specifically for handling TailWind's weird classnames:
https://github.com/leeoniya/dropcss#special--escaped-sequenc...