> everything is explicitly defined in the clearest possible way. (the style is directly ON that exact element. if you have a div inside another div, that inner div will not inherit font, colors, etc. You must define it all again).
Except this isn't the case if you ever touch any of the spacing[0] parts of tailwind. Then you'll suddenly have your elements growing margins out of nowhere, seemingly, and you once again have to look at the ancestry of an element to figure out why its being laid out the way it is.
Hey, yes, I know about space. There's also hover-group, etc.
Those seem to ignore the spirit of what I'm saying though, as firstly, no one says you have to use them if you truly want 100% decoupling. They're just convenience functions.
If you want to control margins based on component indexes and only use margin, then great.
Secondly, they're quite simple to understand.
They're also not out of nowhere, they're out of what you explicitly define as say, space-x-4. Having this be on the parent just makes great intuitive sense, that it wouldn't be defined on the individual items. If I see items evenly spaced I don't even have to think about it that it's obviously on the parent. The mental overhead of this is truly negligible.
I would argue that "spacing growing out of nowhere" is an order of magnitude more painful when using traditional CSS that has grown beyond the "perfect" starter phase of every complex app that uses normal CSS. And I've even tried using all the different CSS frameworks from back in the day where you write classes in certain ways with prefixes, etc etc. It is inevitable that eventually you get so much tangled and dead code, the mental overhead of that is now something orders of magnitude more.
While we are talking about that, you mentioned it being bloated. Your argument is that it takes "CPU" cycles... I forget the exact article (and exact details, paraphrasing), maybe it was github. Classes outperform inherited CSS tremendously, and I think it was github that tried to design their site using 10's of thousands of 1-level-deep classes instead of nested. This is just nitpicking, however. With tree shaking, I have an entire app that sees millions of visitors per month get a 3kb css file when gzipped. The bulk of the js (compiled html) takes up < 100kb for the entire app. I don't think even the most "lightweight" wordpress theme or what have you comes close to that. I just googled "most lightweight high performing wordpress themes" and some blog spam has most of them weighing in at 900kb-1mb (!!!).
Except this isn't the case if you ever touch any of the spacing[0] parts of tailwind. Then you'll suddenly have your elements growing margins out of nowhere, seemingly, and you once again have to look at the ancestry of an element to figure out why its being laid out the way it is.
[0]: https://tailwindcss.com/docs/space