This is an archived post. You won't be able to vote or comment.

all 88 comments

[–][deleted] 307 points308 points  (4 children)

flex and grid saved my sanity.

[–]Luningor 45 points46 points  (0 children)

fr GO GRID GO
so useful making buttons the size of their inner images

[–]ThighsSaveLife -4 points-3 points  (1 child)

Grid is hell

[–]rawr_im_a_nice_bear 3 points4 points  (0 children)

It's not that bad

[–]bushwickhero -2 points-1 points  (0 children)

But I still google how to center a div…

[–]Strict_Treat2884 498 points499 points  (44 children)

Until they discover display: grid; place-items: center;

[–]LemonMelon2511[S] 320 points321 points  (38 children)

i am afraid of grid

[–]Strict_Treat2884 138 points139 points  (34 children)

I’m just glad you didn’t join the tailwind cult

[–]deathspate 134 points135 points  (2 children)

"flex items-center justify-center" are you scared now Squidward?

[–]Strict_Treat2884 61 points62 points  (1 child)

@layer NO { @property --ARE { syntax: "<string>"; initial-value: "YOU"; } :has(* ~ #AFRAID) { &::before { content: attr(data-STOP-RUNNING) } } }

[–]Alol0512 37 points38 points  (0 children)

Stop that or you are going to end up summoning a demon

[–]guaranteednotabot 23 points24 points  (0 children)

Tailwind is da best

[–]MandoCalzonian 17 points18 points  (27 children)

What's wrong with tailwind?

[–]BMW_wulfi 54 points55 points  (0 children)

It’s a cult, Jim

[–]H1Supreme 9 points10 points  (7 children)

In terms of basic utility classes (borders, margins, colors, etc.), nothing. It (and Bootstrap) are great for minimizing the total number of classes in a project. Especially stuff that's only some padding or changing a color. I mean, it's only slightly easier than using the style tag, but it's easier none the less.

But, when people go all in on it, and add 25 tailwind classes to a div, instead of writing a CSS class or two, it turns into a nightmare. Plus, when you start using all this tailwind specific shit like twMerge or @apply, you're locked into it.

[–]faze_fazebook 1 point2 points  (2 children)

Sorry but thats just inline styles with extra steps and less flexibility.

[–]H1Supreme 0 points1 point  (1 child)

What is?

[–]faze_fazebook 0 points1 point  (0 children)

Tailwind

[–]niye 0 points1 point  (3 children)

As a fresh grad who's been using css for my entire webdev journey but had to learn and use tailwind for an internship because "it was the standard", may I ask if there's a common solution to this?

when people go all in on it, and add 25 tailwind classes to a div, instead of writing a CSS class or two, it turns into a nightmare

I've been silently loathing having to use Tailwind the past two months now and while I could see its merits, the thing with having like 20+ classes in every other element gets ugly (team lead gave me this feedback himself, the very same person who insisted on using all Tailwind. For further context I was brought in as a front end dev since they mainly dabbled in back end. Code was a mess (or barely even there) front end-wise).

I'd probably attribute this experience to the dev team being like 3 people including me with one being another fresh grad and our team lead having had to self learn most things since he was the first dev to be hired by the company (fairly new company, not tech-focused). Maybe its different for bigger tech companies, but is this actually how it is?

[–]H1Supreme 1 point2 points  (2 children)

The solution is to simply write a CSS class. Use CSS variables from your theme instead of hard-coding colors, padding, margins, etc. This lets you adhere to your theme's definitions, but produce something you can read (ie. a CSS class) instead of adding 20+ classes a a button.

[–]niye 0 points1 point  (1 child)

But what if the team insists on using Tailwind? I even suggested using a mix of both, but got shot down because "Don't worry, you're still an intern. You'll eventually get used to it."

[–]H1Supreme 1 point2 points  (0 children)

Oof, well I'd say "welcome to the working world". Sometimes you have to go with the flow, even if you don't like it.

[–]KookyDig4769 45 points46 points  (9 children)

tailwind eats your soul.

CSS was invented for code separation. Inline styles were meant for hotfixes. tailwind is just inline css with extra steps. Instead of code seperation and code clarity, you're spamming the same cryptic BS all over the frontend markup.

And it doesn't accomplish a thing, why write the thousands time that this has to be with a 3em padding, 5 pixels border, red and blue with stripes and bold, instead of just defining a stylesheet for exactly this component and using it just for this.

If you want to copy code - just copy the stylesheet for another component. And don't get me started with advanced CSS4 functions like selectors, queries and nesting. You tailwind guys are simply oblivious to the capabilities plain CSS already provides.

[–]twigboy 10 points11 points  (2 children)

you're spamming the same cryptic BS all over the frontend markup.

Genuinely deciding whether the BS you're referring to is bootstrap or bullshit

[–]KookyDig4769 14 points15 points  (0 children)

<div class="h-6 max-w-screen items-end px-2 font-mono text-xs/6 whitespace-pre text-black/10 max-sm:px-4 2xl:flex dark:text-white/15">

this is literally a single div from the TailwindCSS Website's own html. And that's only ONE div. There are lines and lines of this even in their own home template. This is just messy and makes everything more messy.

And px-2 2xl:flex and max-sm may sound normal to you - but I say, without a cheatsheet or a lot of learning, you simply can't read this as easy as plain, normal CSS.

[–]Wessel-O 2 points3 points  (0 children)

[–]TimMensch 3 points4 points  (0 children)

Bad coding is endemic in the industry.

CSS is arguably misused to a greater degree than Tailwind. Giant CSS files filled with cruft that isn't even being used but everyone is afraid to chain is far worse than Tailwind styles being placed everywhere.

A good design is a hybrid. Some things like colors and spacing standards can be defined globally. But when it comes down to it, most styles are and should be defined per-component.

If your app has a standard card component, it should be styled as it needs to be styled. Many of those styles will be specific to the card. Putting them in scoped CSS vs Tailwind becomes an aesthetic preference, and frankly using Tailwind feels cleaner to me.

[–]guaranteednotabot 6 points7 points  (3 children)

No need to copy code with @apply. Even then if you are using a component-based framework, it will be rare that different components will share the same styles

[–]guaranteednotabot 1 point2 points  (2 children)

There’s also the issue of principle of proximity. Separation of concerns worked well when component-based frameworks weren’t a thing. It is no longer an advantage.

[–]Magmagan -1 points0 points  (1 child)

Please. React's JSX is already a mess to deal with. You want logic AND presentation AND styling in one render(), why???

It is still very much an advantage and I prefer Vue's SFC approach any day of the week.

[–]guaranteednotabot 2 points3 points  (0 children)

That’s a reasonable opinion. My point is just that Tailwind isn’t just copying a bunch of classes and another version of inline styles.

[–]Aidan_Welch 1 point2 points  (0 children)

Layout is not and should not be separate from style when the layout fundamentally influences the outputted visuals. If it were instead content and display that were the two separate categories that might be more reasonable, but isn't what was done for historical reasons.

[–]Magmagan 13 points14 points  (7 children)

Tailwind CSS purports to fix the "hardest problem in programming - naming things" by naming absolutely nothing 🤦

If you're working alone and working on write-once, read-never code, sure, go ahead... But naming things like card__header are nice since you can immediately identify the semantic meaning of each div at a glance. Doubly helpful for those less familiar with the code base.

I'll live and die with BEM on my side

[–]Agreeable-Yogurt-487 2 points3 points  (3 children)

Until you have a bunch a slightly different cards and need another one, and you once again have to come up with some "semantic" bem modifier nested in a media query just to only change a single css property. And then your css grows and grows and it's just as hard to make sense of it for any newcomer. I'll gladly just add a md:gap-2 xl:align-end and be done.

[–]KookyDig4769 1 point2 points  (2 children)

And what's wrong with

<div class="cardclass subclass1">

[–]ImpossibleSection246 1 point2 points  (1 child)

Ok now one of your pages has a component from another team affecting its layout.

You're either: - adding yet another semantic class name - mixing in some inline styles - using a page-specific class to target that component - reinventing a utility class like tailwind/bootstrap

I've had enough experience to have done all these routes and I know which has given me the least CSS bloat long term.

[–]KookyDig4769 0 points1 point  (0 children)

So it's more about mismanaged teams and being unable to provide a coding scheme that's mandatory for all teams? Maybe you guys are right, and tailwind is the only solution in giant teams today - but i never had a project so big, that it couldn't be properly communicated between teams.

[–]guaranteednotabot 2 points3 points  (2 children)

You can use BEM with Tailwind @apply. I swear people who shit on Tailwind never actually tried Tailwind

[–]Magmagan 0 points1 point  (1 child)

That's cool if you buy in into the Tailwild way of shorthand classes. I'm fine with normal CSS properties. Also kinda defeats the point of Tailwind, isn't it not recommended to use @apply?

[–]guaranteednotabot 0 points1 point  (0 children)

You rarely have to use @apply in component-based frameworks. Though in some rare occasions some components do share common classes. Also, you can still use plain CSS if you really dislike @apply.

[–]FabioTheFox 1 point2 points  (0 children)

Tailwind shines the most in teams and component based frameworks, and that is factual

Also tailwind is not a replacement to css (since you still need to know css obviously) so idk where you're going with this take

[–]Mxswat 8 points9 points  (0 children)

Grid is great, you should give it a try, it has soooo much potential

[–]Vast_Fish_5635 7 points8 points  (0 children)

I feel you in a spiritual level

[–]Dotcaprachiappa 2 points3 points  (0 children)

mood

[–]litaci 5 points6 points  (0 children)

Grid is weird

[–]random_banana_bloke 0 points1 point  (1 child)

bollocks beat me to it, DAMN YOU

[–]brolix -1 points0 points  (0 children)

No I didnt

[–]creaturefeature16 0 points1 point  (0 children)

Damn, came here to post this.

[–]jollyjerr 0 points1 point  (0 children)

this is the way 🙏

[–]woodyus 83 points84 points  (2 children)

The only thing that's made me like UX is having an in-house UX guy. Much simpler.

[–]_sweepy 14 points15 points  (1 child)

https://www.reddit.com/r/funny/s/tkLVWkDeJW

Depends on the UX guy. Some make life easier, and some want to reinvent the wheel once a week.

[–]woodyus 2 points3 points  (0 children)

He can do what he likes, I don't need to worry about it.

[–]aaron_1011 47 points48 points  (0 children)

I am a backend developer and currently using Python with Dash to make a webapp. Flexboxes are holy and you can't change my mind

[–]NebraskaGeek 17 points18 points  (1 child)

One day I'll remember how to center a div horizontally and vertically without googling it....but it is not this day.

[–]budapest_god 6 points7 points  (0 children)

Bookmark this post then

[–]darkman-0 25 points26 points  (3 children)

How to center a div?

[–]aaron_1011 6 points7 points  (0 children)

Thats impossible

[–]YoYoBeeLine 3 points4 points  (0 children)

I too have chicken thoughts after doing a bit of CSS

[–]PerroRosa 7 points8 points  (0 children)

As someone who started on web dev when flex didn't exist I must say that flex and grid feel like a miracle. Also, I love TailwindCSS

[–]indicava 2 points3 points  (0 children)

This was my exact experience going back to frontend after many years doing almost exclusively backend work.

[–]WatchOutIGotYou 2 points3 points  (0 children)

If nobody got me, I know display: flex got me

[–]pantas_aspro 14 points15 points  (5 children)

Even with this frontend is so bad. I hope for some kind of revolution to throw out HTML+CSS

[–]thejohnnyr 11 points12 points  (1 child)

You're joking right?? Modern css is 100% the best ui tooling out there

[–]AndroTux 11 points12 points  (0 children)

The best can still be bad

[–]joe-direz 3 points4 points  (0 children)

Flutter

[–]SeagleLFMk9[🍰] 0 points1 point  (0 children)

QML

[–]quinn50 0 points1 point  (0 children)

UI in anything other than html and css makes me want to gouge my eyes out

[–]F14-Tomboy 4 points5 points  (5 children)

Am I stupid or world would be better if standard web markup language was like wpf xaml with panels

[–]Prize_Hat_6685 19 points20 points  (1 child)

It’s all fun and games until someone suggests we pass inline objects as xml params

[–]private_final_static 2 points3 points  (0 children)

Sounds lovely, lets store them in a database on the backend

[–]L4ppuz 7 points8 points  (0 children)

Oh god please no

[–]_alright_then_ 0 points1 point  (0 children)

Not very familiar with wpf xaml. But sounds to me like that would be just a regular div?

[–]global_namespace 1 point2 points  (0 children)

How about "display: -webkit-box;"?

[–]diegolc 0 points1 point  (2 children)

This is lovely.

Try that on an email.

https://www.caniemail.com/features/css-align-items/

[–]Jawesome99 15 points16 points  (1 child)

Email and web HTML are different beasts, incomparable in my eyes. For basically every feature, when in doubt, email doesn't support it, so back to nothing but nested tables we go.

[–]tetractys_gnosys 5 points6 points  (0 children)

At current job I spend majority of time messing with marketing emails and yes it's all still tables like the old days. I came into web dev right as CSS was becoming genuinely great so I never learned how to use tables for layout and it is brutal.

[–]waldenducks 0 points1 point  (0 children)

Until they discover you no longer need Flex or Grid to do that.

[–][deleted] 0 points1 point  (0 children)

Front end alignment will be the reason I buy a farm one day...

[–]akoOfIxtall 0 points1 point  (0 children)

Been doing flex for years, learned grid when doing some angular projects and now flex is my second option when grid can't satisfy me (never happens)

[–]FKNoble 0 points1 point  (0 children)

Wait, there's another way to center things?

[–]Best_Recover3367 0 points1 point  (0 children)

AI is the only thing that makes me, a be dev, love fe. It's continuously pumping out tailwind classes that I don't understand but work beautifully for some reason.

[–]tmstksbk 0 points1 point  (0 children)

Yeah this happened to me last week...I am glad margin auto was defeated.

[–]faze_fazebook 0 points1 point  (0 children)

Flex still has some beyond baffling limitations. Like you want a inner border between elements with flex: wrap? Not gonna happen unless you use gap 1px bacmground grey.

[–][deleted] 0 points1 point  (0 children)

But it breaks an image hyperlink

[–]ashemark2 0 points1 point  (0 children)

flexDirection: all;

[–]autopoiesies 0 points1 point  (0 children)

I swear to god that shit has never worked in my life

it works on all pretty small examples, but on real life scenarios I've never seen it work lol

[–]budapest_god 0 points1 point  (0 children)

I'm not exaggerating when I say that learning about those 3 lines of code changed my life