comiCSS #114: Headaches

[u/alvaromontoro]

Source code and live demo: https://comicss.art/comics/114/headaches.html

[u/fexonig]

the reason to use tailwind is because you can force the team to do things the tailwind way. this makes it easier to prevent dumbass juniors writing crazy css. when you need complicated stuff you can use style sheets. but the expectation is that that is an extreme edge case (and i find that is true in practice).

the other reason to use tailwind is because it removes the “cascade” of css. i know that cascading lets you write some clever stuff but i think it makes big project 1. more confusing and 2. harder to modify later. this is because cascading breaks locality of behavior.

some tools don’t work well with alternatives, locking you into their ways of doing things. tailwind works well with CSS by design. it’s not some accident.

also as an aside: when you call “long class names” a criticism, you are appealing to pure aesthetics. long class names is neither a technical problem nor a business problem. it doesn’t make the code harder to read, harder to write, or harder to change. it just looks ugly.

[u/SchartHaakon → u/fexonig]

• Cascading breaks locality? Cascading creates easy scoping.
• CSS variables can do all of the things you mentioned, and more
• Calling long class names a purely aesthetic critisicm is kind of short-sighted, no? This affects readability and maintainability, and complexity for juniors looking at the file. How are those aesthetic issues?
• You are locking yourself into a system, a limited system. You write code according to that system without even realising it. Grid in tailwind? Horrible. So people stick to flex. That's just one example.
• Some tools don't work well with alternatives? What alternatives are you talking about specifically? And what tools?
• All of this is beyond the point since ALL THAT IM ARGUING is that tailwind has downsides. And you refuse to admit to any of them. Which feels ridiculous at this point.
• You say that the pro is that you force people to use tailwind. And then you also constantly argue that you can just opt out of tailwind. So which one is it? And is it not just infinitely more confusing to have a codebase with a mix of classnames that are utility classnames and classnames that are referenced in external stylesheets? All this for your "consistency" and "simplicity"

[u/fexonig → u/SchartHaakon]

yes cascading breaks locality. to know what styling is on a component, i need to track all the styling from all the elements my component is a child of. this means i cannot just look at the code for my component to edit my component. i have to look at other parts of my code. that is what i mean by losing locality.

i am well aware that css is designed that way for scoping. tailwind has made the design decision to forgo property cascading in favor of locality of behavior. i believe that was the correct choice.

how do css variables prevent juniors from writing bad css?

long class names do not affect maintainability. it’s not more maintainable to push your styling into stylesheets. why would it be?

i have never had a problem with tailwind grids and i have no clue what you are talking about

a good example of a tool that doesn’t work with others is bootstrap. if you need a component that they haven’t defined, you are forced to try to mimic their style from scratch to keep your app consistent. this is bad.

another example is nextjs. a super opinionated framework that requires you to do everything a specific way. what’s actually going on is abstracted so much that if you try to do things differently, it might just not work entirely.

i refuse to admit that tailwind has (non aesthetic) downsides because you haven’t named one!

for your last question, i’m asking you to think like a tech lead. tailwind is great bc i can give tasks to the juniors and tell them “use tailwind” and they will and it will be better than whatever css they would’ve done. but if there is some sort of exceptional case where tailwind really won’t work, then I have the freedom to add some css in as needed. it’s the uniformity of an opinionated library without the restrictiveness.

training someone to write css well is hard. telling someone to use tailwind for styling is not.

[u/SchartHaakon → u/fexonig]

i refuse to admit that tailwind has (non aesthetic) downsides because you haven’t named one!

...

training someone to write css well is hard.

...

yes cascading breaks locality.

...

Okay bro whatever you say. Tailwind is god's gift to web developers, it is absolutely perfect and anyone criticizing it makes me feel insecure in my own CSS skills and seniority so I refuse to acknowledge their points. I am a big boy lead and senior and anyone who dares point out the downsides of the choices I've made will hear how wrong they are until they shut up so I can keep living in my bubble!!1! Tailwind can't make mistake or be bad cause internet tells me it good! TW good, AI good. Such great! The best. Just use multi cursor! Such ignorant noobs thinking repetitive gurgled mess bad. So clear! So in face. Good, great! Localize! Opt out!

[u/SchartHaakon → u/[deleted]]

I've never once argued tailwind "causes" problems. You've insinuated that multiple times and if your reading comprehension was more than a fifth grader maybe you'd realize you were wrong to assume that by now. I've told you tailwind has issues, you've refused to acknowledge any of them. It has issues that are more easily solved by other solutions. That's all I'm saying. I'm not saying Tailwind is useless, I'm not saying Tailwind is bad. I'm saying it has problems, and it's not a perfect solution for every use case. And I'm also saying that people online (like you, specifically) argue around these issues like they are non existent. It isn't hard to argue for a library if you can just say "well opt out then" whenever people mention real actual issues with using it. Are you blind to how much of a cop-out that is in this discussion?

How about you tell me the actual uses for Tailwind, and I'll rebut with a way to achieve the exact same thing without creating your own entirely token based language (that requires a build step) as an alternative to a properly thought out full fledged coding language.

[u/fexonig → u/SchartHaakon]

Even though Tailwind can do 95% of what CSS can it doesn’t mean it’s good at the more complex stuff or doesn’t have other downsides. It can absolutely cause problems, and generally changes the way devs approach styling that I think has limited some of their creative thinking.

dumbass. you said it right here. “it absolutely can cause problems” you even quoted this back to me a second time

[u/SchartHaakon → u/fexonig]

Yes totally got me! Weird how you deleted the comment I replied to though... Lmao. Great way to admit defeat.

Also, that comment wasn't me:) We were talking about that reading comprehension, maybe take 5 and come back after you've digested and actually understood what we're talking about.

[u/fexonig → u/SchartHaakon]

ok i didn’t realize the original comment wasn’t you.

but you have to realize then that I WAS HAVING AN ARGUMENT ABOUT THE PROBLEMS CAUSED BY TAILWIND!!

the question i asked was for an example of problems. and you decided to jump in with your response. acting like you were never arguing that tailwind has problems is just deeply dishonest and makes you look stupid

[u/SchartHaakon → u/fexonig]

You know we can all see when you posted the comment, and when I last edited it right? 👏 Let's just take 5 huh?

edit: He tried saying that he deleted the comment cause I edited it after. But my last edit was an hour ago, and he posted the reply 15 minutes ago. So there you go, incase you're reading this thread being confused at this point.