There's a worrying trend in modern web development, where developers are throwing away decades of carefully wrought systems for a bit of perceived convenience. Tools such as Tailwind CSS seem to be spreading like wildfire, with very few people ever willing to acknowledge the regression they bring to our field. And I'm getting tired of it
I mean, for me, the greatest pro I’ve heard for the usage of Tailwind is that it makes collaboration much easier. For example, a PR to add styling to a component is easy to read - you just see the new classes added. Not only that but you know that it only affects that element and that no CSS is still being kept in your CSS files that is no longer being used.
The cascade is seen by some as one of the most annoying parts of CSS at times because it can make debugging harder - and many will simply abuse !important as a result.
I’d argue that styled components, like Vue SFCs or Surface-ui, are even better in this regard. You can see the whole component there, and all the classes along for the ride. And they’re usually written in something fairly close to “real” CSS
Well, you get all the real advantages of real CSS. The browser tools work. Various other preprocessors work. You can use timesavers like Sass or Less or whatever else.
The biggest advantage, imo, of using a component based design, where components handle not only the styling but the entire appearance of a “thing”, is that you make the contracts for what that thing has to support explicit. If your button needs to be able to change colors, you can add a prop that exposes that ability. If it needs to change sizes, again, that can be exposed by a prop. But they aren’t by default.
You can sort of accomplish this in “real” css using attributes carefully, but its not as elegant.
I mean, for me, the greatest pro I’ve heard for the usage of Tailwind is that it makes collaboration much easier. For example, a PR to add styling to a component is easy to read - you just see the new classes added. Not only that but you know that it only affects that element and that no CSS is still being kept in your CSS files that is no longer being used.
The cascade is seen by some as one of the most annoying parts of CSS at times because it can make debugging harder - and many will simply abuse
!importantas a result.I’d argue that styled components, like Vue SFCs or Surface-ui, are even better in this regard. You can see the whole component there, and all the classes along for the ride. And they’re usually written in something fairly close to “real” CSS
But I mean, if they’re gonna be component specific CSS, why even bother over just using tailwind?
Well, you get all the real advantages of real CSS. The browser tools work. Various other preprocessors work. You can use timesavers like Sass or Less or whatever else.
The biggest advantage, imo, of using a component based design, where components handle not only the styling but the entire appearance of a “thing”, is that you make the contracts for what that thing has to support explicit. If your button needs to be able to change colors, you can add a prop that exposes that ability. If it needs to change sizes, again, that can be exposed by a prop. But they aren’t by default.
You can sort of accomplish this in “real” css using attributes carefully, but its not as elegant.