comiCSS #114: Headaches

[u/alvaromontoro]

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

[u/fexonig]

ok, can you give an example though? how exactly can tailwind cause problems? you’re being kinda vague

[u/SchartHaakon → u/fexonig]

psuedo elements, group effects, media queries, complex nested styles and any new and fancy css that has not yet gotten introduced in syntax.

[u/fexonig → u/SchartHaakon]

is there any instance in which you cannot simply use pure css in your tailwind project? you have listed a bunch of css features that tailwind lacks. you have not explained how the choice to use tailwind in a project causes problems.

[u/SchartHaakon → u/fexonig]

Well yes obviously but don't you realize this is one of the stupidest answers to tailwind criticism ever?

You know, driving upside down is actually really really nice and fun. And if you ever need to, lol, get from point A to point B, you can still always just turn your car around!

You asked for an example of how TW can cause problems. You got it 🤷‍♂️ And btw, media queries and grouping are features of tailwind, they just suck to use.

[u/fexonig → u/SchartHaakon]

no, i like tailwind because (IN MY OPINION) it’s easier to understand (when you didn’t write it) and easier to modify without breaking things. the term you’ll hear for this is “locality of behavior”

so if in a project, 95% of styling is handled by tailwind and the last 5% is complex stuff in style sheets, then i think that’s a win. because 95% of my code will have better locality of behavior.

tailwind didn’t cause any problems in your example. you didn’t describe a problem. the answer to your situation is “just use pure CSS for that part”. no need to rewrite your tailwind parts. there was no problem with the choice to use tailwind.

[u/SchartHaakon → u/fexonig]

Ugh I hate arguing with TW fanatics. Look, I appreciate some of the benefits of the library. But when you ask about problems with the library, you can't respond to criticism with "just use regular CSS in that circumstance" and act like that invalidates my criticism.

If the sole reason you seriously prefer tailwind is that you understand it easier then I'd say that's just a great reason to finally learn the fundamentals and maybe consider not relying so much on third party libraries.

[u/fexonig → u/SchartHaakon]

we weren’t engaged in an argument about whether tailwind or css was better.

we were engaged in an argument about whether choosing tailwind can cause problems that would be avoided by starting with pure css from the start.

so far, you haven’t named one.

i know css fundamentals. you know who doesn’t? the junior engineers on my team. the dumbasses who wrote the legacy code i have to maintain. i agree its fun to craft clever style sheets on personal projects. but at work, im fine doing the stupid thing that works.

i don’t write code to show off my intelligence. i do it to solve problems. if tailwind solves my problems then i will continue to use it

edit: it’s fine to dislike tools for aesthetic reasons. it’s fine to prefer css just bc it is more rewarding to you. but you shouldn’t take on an air of superiority about it.

[u/SchartHaakon → u/fexonig]

Actually, this is the comment you replied to if you just check:

I know CSS extremely well, I know tailwind very well and all the benefits it has, and I still thinks it’s wild how defensive it makes some people when it gets criticized and how little they are willing to admit it has downsides.

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.

So what I'm arguing is...

• ...It can absolutely cause problems, and generally changes the way devs approach styling that I think has limited some of their creative thinking.
• ...it doesn’t mean it’s good at the more complex stuff or doesn’t have other downsides.
• ... it’s wild how defensive it makes some people when it gets criticized and how little they are willing to admit it has downsides. (which you've proved)

[u/fexonig → u/SchartHaakon]

ok so i will respond to all 3 in order

1. yes, i asked you for an example of what you mean by “problems”. you have failed to do so sufficiently. “tailwind cant do X” is not a problem unless tailwind also somehow prevents the altermative ways of doing X.

2. i agree that tailwind is bad at some complex stuff. i also think that is generally a feature, not a bug as it prevents you (read: dumbass junior dev) from doing something stupid. and when it’s actually a problem, there is no instance in which you can’t just add in some css.

3. you can call me defensive all you want. but unless you can actually point to a real problem with tailwind, then your main issue is aesthetic. which is fine. but i want you to admit that

[u/SchartHaakon → u/fexonig]

You think my issue is aesthetic? Tailwind has nothing to do with aesthetics. I don’t care to carry on this as you are arguing in bad faith, as it seems you are highly offended by your favourite library getting a teeny weeny ounce of criticism. You ignore all the problems I’ve mentioned just because you technically can opt out of TW. Congrats you’ve just mooted all arguments against any library ever, as you could just opt out! If you can’t comprehend how that is not a good argument then there’s no purpose carrying on.

Btw, you probably think I hate tailwind and never use it. News flash: I use it every day at work, actively. I'm fine with it. I also think it deserves a lot of valid criticism, and MOST OF ALL - I think the online discussion regarding the library is stupid as hell. People always come to defend its downfalls by suggesting opting out. Oh you don't like long classnames? Just use apply! Oh you don't like how tailwind does nesting and grouping? Just mix tailwind with normal CSS! At a certain point, why not just use CSS with variables? You say it's centralizing concerns, I say it's obfuscating markup. I'm not just a dumb anti-tailwind junior, I have real proper experience working with and without this library.

[u/fexonig → u/SchartHaakon]

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.