If you compare a given snapshot of code containing utility css vs well defined CSS, then yes, it looks worst.
The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt. Utility CSS contain redundancies (on the HTML side of things), but the rule of dumb is that you shouldn't refactor redundancies until you are absolutely sure what the unit of abstraction / isolation should be. In the case of prototype and fleshing out your designs, having a concise CSS stylesheet won't work, especially if you work with other people who are tunnel visioned on one specific scenario (a sort of tragedy of the commons) and not thinking hollistically as you would as an solo developer. We can think of that idealized, perfectly concise, stylesheet an "unstable saddle point" whereas utility CSS is not already at the saddle point but it does converge towards a stable one.
> The reality is that if the codebase and style code is in flux, that idealized CSS stylesheet will churn towards a being a mess of tech debt.
Interesting. That’s not been my experience. People tend to clean up as they go, eg if the design says we now need a thinner padding / gaps or a different colour blue, we change the variable, and if we spot cut and pastes we fix them.
It’s certainly much easier to refactor than visual classes mixed into HTML.
Tailwind doesn’t force people to do anything more than using regular CSS does. Or any technology - it’s really difficult to change human behaviour with technology.
What you describe is not representative of how CSS is maintained in most companies. You always end up in a situation where it's impossible to track down what styles affect what elements so you start overriding and duplicating because you're afraid to touch existing CSS.
Come on, do you honestly gonna tell people that just because a Turing-machine somehow managed to untangle that mess, it is humanly parsable? Most sites are not HN with like 3 lines of CSS, dev tools will list you like 10s of different rulesets that together determine the output — of course one can see what’s the end result, but now try changing some property that gets applied by multiple rules. That can get very difficult/impossible since you may not have control over every stylesheet.
Nothing is impossible but it becomes hard because the element is styled through multiple cascades, and you need to track it down both ways. When changing a class or a style you need to know what elements that change affects, which will be hard to track down because of the same reasons.
I don't write CSS (normally) and yet I understand every single statement, and can easily find which statement I'd need to change for a given. It's that simple.
You could argue "well you should learn CSS!" but at the end of the day, I don't need CSS often enough to want to bother. Frameworks like TailwindCSS have been great for people like me.
I can't even imagine what raw CSS lovecraftian horror captures all of the corner cases the classes you linked are hiding away from me (and to be clear, I'd rather not know or care)
For someone who knows CSS I don't see it as a big downgrade in readability?
But for someone like me, the right side of that equation isn't something I could go around writing in my HTML, the left form is.
Even if all it's doing is acting as a short form for CSS that allows me to do a "no-no" and embed CSS in my markup, it enables me to be infinitely more productive in CSS than I've ever been.
-
And the reality is, if one day I work on a product that's so cursed with success that breaking that encapsulation starts to bite me:
a) It's rare there won't be a lot about the design that has to change anyways
b) I can hire/pay people who do this stuff for a living.
And in the meantime I'll still get a ton of value from it
Tailwind may not be targeted towards you. For me, it was a solution to many of my CSS problems. However, I'm not an expert in CSS, and I can recognize that for someone who already has extensive experience with CSS, it might just appear as a complex abstraction.
Also, you can find a lot of Tailwind templates/components and they just work. You don't have to worry about a snippet clashing with or overwriting some other CSS you have like you would with plain HTML/CSS snippets.
Sure, HTML looks uglier when I add a dozen classes to an element instead of adding one class with a dozen of CSS rules, but I'm more than willing to accept that as a compromise.
Overall, Tailwind made frontend design more accessible to me than it ever was, and I never have to use `!important` again.
I find that some people are upset by the "democratization" aspect of this honestly.
It usually comes out as commentary along the lines of "well what's so hard about learning when to use !important?", "that tells me your CSS is poorly organized"... or sometimes just a drive-by downvote
In my experience that comes from a misguided idea that people who jump at it are somehow uncurious, or irresponsible, for "wanting the sausage without learning how it's made" and not caring anything at all about the craft.
-
I don't know if it occurs to them that there are some of us who have our hands in so many pies that, regardless of will or want, there is simply no more time for more pies:
The last time I picked up CSS, it was to write a static page to serve as a control interface for firmware I wrote for an MCU, for accessing an API engine I had just written for said MCU, embedded in a circuit design I had created and hand assembled, which was in turn embedded in a stepper actuated 3d printed assembly I had designed and printed. And all that was in a weekend: the last thing on earth I had time for at the end of it was figuring out what the idiomatic CSS way to style some buttons was...
The fact is, I get it: I am able to appreciate craft, and I understand how so casually throwing best practices to the wind "because it's easy" could come across as offensive. But at the end of the day, sometimes it really doesn't matter how the sausage gets made as long as it gets made.
100% agree, in fact my comment got a couple of those drive-by downvotes. The closest equivalence I can think of in my line of work as a sysadmin is me being upset that non-sysadmins can run things with `docker-compose up -d`.
I'm not. I have no interest in learning more, same way as frontend developers have no interest in learning to build custom Dockerfiles or Kubernetes deployments. It's not that it's difficult to pick up, we just can't be bothered to. People that do frontend just want their things to run, and I just want to be able to make a website that doesn't look like shit without spending a ridiculous amount of time on it.
Anything that bridges these gaps is a win in my book. Tailwind is better than Bootstrap (granted, it's been years since I've last tried it), better than drag-and-drop website builders, worse than pure CSS if you know what you're doing. It won't make your job obsolete, it just makes things easier for the rest of us. Same goes for docker-compose.
This is a component you reuse across tons of sites, it's not a one off component you're building for yourself. It's also not just a CSS framework like Bootstrap. This is full CSS + JS component's with functionality, Vue/React/Svelte framework integration, and events built in.
Whether css-in-JS as a whole makes sense beyond these generic component type systems is a good question. There's plenty of complexity introduced.
But for a generic component being used in plenty of use cases - not just UI usecases - but highly interactive JS driven ones as well, then it makes a lot more sense to have styling tied to programming languages and conditionals and options and JS data structures.
Css in JS (as in, inline styles) is just going to be a lot worse than class names because JS is fundamentally performance bottlenecked way harder than CSS is.
I'm not sure I understand what you mean by CSS in JS, since you say inline styles next. Are you talking about JSX having a style component? Or Tailwind within the className in JSX? Or CSS in JS libraries like styled-components?
Can you explain what you mean by this? Do you mean just generating hundreds of strings (with long atmoic class names) to style each component vs loading a global CSS?
IDK about React but Vue also has things like scoping, where the elements get unique IDs appended as data tags so you don't have to worry about CSS global scope clashes. Plus with Webpack/Vite the CSS automatically gets extracted and via HTTP2 only loads the tiny JS and CSS files needed only for the components used on the page.
In that case giant blobs of CSS and JS would be less efficient.
It used to be, that CSS-in-JS meant people naively writing something using a computed string to use the HTML style attribute, like so
var style="color:blue;text-align:center;"
return <h1 style={style} />
and some CSS in JS frameworks compile down to pretty much that. However, this is a bad practice, because you will consistently see worse performance than just using css files and classnames instead.
Sure true, in the old jquery plugin sort of way, I forgot that. Although that's not really what people call JS component's these days with Web Components/react/Vue sort of styles mixed with JS within the self-packaged components rather than a CSS framework with a couple optional jquery plugins.
Unless they modernized it in recent years, haven't used it in 5yrs.
As much as I like Tailwind, I too does not understand the Tailwind-in-js thing for basic components likes buttons or checkboxes.
Why not just create a button component in whatever framework you are using with scoped styles. This just seems like unnecessary coupling to me.
Sure, the way I phrased it. I just think it's a bit weird to chose this "direction" for a button. No matter if you are creating something new och using something already made, like this.
Depends on work. If you need lots of bespoke styles then you quickly realize Tailwind only is wrong approach.
For sure there is huge trap in webapp developers who mostly copy paste HTML partials from Tailwind UI who succumb to Tailwind marketing and completely forget CSS.
Developers mostly don't like CSS so not many care. That's why there are so many solutions how to avoid it.
But utility classes (and tailwind as most popular utility classes generator) are super useful even if you are not just copy paste UI guy.
You want to see that. You immediately see how an element is styled without any hidden CSS that has applied styles through cascading. You immediately know what to change and where when you need to update it, without it indirectly affecting other elements. It's self-contained and you can copy paste it everywhere without any dependencies.
