Ranter
Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Comments
-
All CSS frameworks are basically a step backwards to the 1990s where styles were applied inline. CSS frameworks misuse CSS to stick to that bad old working style through polluting the HTML with presentational classes, just as if CSS had never been invented.
Tailwind is a particularly gross example - just look at their HTML on their homepage. They do actually use inline styles - on a website that promotes a CSS framework. You can't make that shit up. -
@Fast-Nop true, choosing CSS framework is choosing lesser evil, idea behind it to "write less", but on official tailwind doc there is:
"<button class="px-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Message</button>"
there is exactly 254 characters on one line for one simple button
and ok i can live with that somehow, but if you need another button beside that looks exactly the same you still write 254 characters, and so on
but there is probably some advantage since a lot of people are using it, i just dont see it -
@KorDarei The whole methodology is deeply flawed. If you want to change any of that stuff, you have to change it in each and every page where you use it. With semantic classnames telling WHAT that button is instead of HOW it looks, that wouldn't be an issue.
The reason why a lot of people are using that nonsense is... web dev. Going by the sad technical state of the average website, your average web dev is a completely incompetent moron, and it shows. -
@KorDarei Tailwind can have class names too so you don't have to write all that inline to your HTML.
-
Crismon2343yWell you comments dont make a lot of sense. Of course you use composition to replicate a button that looks the same, so if you have to change it, you change it once.
I can see the appeal, especially while bundling to eradicate all those css that is usally just a duplicate. -
@Crismon that is a detail i found usefull, mostly when changing something a lot of unused css is left...
but i think at a big cost, how many lines you need to change if a client asks "lets remove border radius from buttons"?
you cant change it globally because it will affect all other elements that use this class -
@KorDarei That's why you use semantic classnames, not presentational ones. Just because two elements happen to have the same border-radius doesn't mean they got it via the same class.
Also, unsused CSS is easy enough to figure out in Chrome dev tools IIRC. -
@KorDarei you can change it globaly, you just need a bit better tooling. Emacs has this search globaly and then create buffer with search results to replace in buffer and commit changes. Taking literaly 1min to change.
Anyway, abstract btn to class and you are good to go. Don't know what your issues are guys. Tool is good but your usage are wrong.
Tailwind is intuitive abstraction over css so you can work in one file.
Related Rants
So what do you guys think of a tailwind css?
I mean... it looks way too verbose, like we got back to inline css
on the other hand i see a lot of people using it
so whats the catch?
question
tailwind
css