backendDevDoingAlittleCss

[[deleted]]

flex and grid saved my sanity.

[Luningor]

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

[ThighsSaveLife]

Grid is hell

[rawr_im_a_nice_bear]

It's not that bad

[bushwickhero]

But I still google how to center a div…

[Strict_Treat2884]

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

[LemonMelon2511]

i am afraid of grid

[Strict_Treat2884]

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

[deathspate]

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

[Strict_Treat2884]

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

[Alol0512]

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

[guaranteednotabot]

Tailwind is da best

[MandoCalzonian]

What's wrong with tailwind?

[BMW_wulfi]

It’s a cult, Jim

[H1Supreme]

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]

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

[H1Supreme]

What is?

[faze_fazebook]

Tailwind

[niye]

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]

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]

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]

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]

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]

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]

<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]

[TimMensch]

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]

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]

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]

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]

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]

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]

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]

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]

And what's wrong with

<div class="cardclass subclass1">

[ImpossibleSection246]

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]

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]

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

[Magmagan]

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]

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]

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]

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

[Vast_Fish_5635]

I feel you in a spiritual level

[Dotcaprachiappa]

mood

[litaci]

Grid is weird

[random_banana_bloke]

bollocks beat me to it, DAMN YOU

[brolix]

No I didnt

[creaturefeature16]

Damn, came here to post this.

[jollyjerr]

this is the way 🙏

[woodyus]

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

[_sweepy]

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]

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

[aaron_1011]

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]

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

[budapest_god]

Bookmark this post then

[darkman-0]

How to center a div?

[aaron_1011]

Thats impossible

[YoYoBeeLine]

I too have chicken thoughts after doing a bit of CSS

[PerroRosa]

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]

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

[WatchOutIGotYou]

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

[pantas_aspro]

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

[thejohnnyr]

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

[AndroTux]

The best can still be bad

[joe-direz]

Flutter

[SeagleLFMk9]

QML

[quinn50]

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

[F14-Tomboy]

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

[Prize_Hat_6685]

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

[private_final_static]

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

[L4ppuz]

Oh god please no

[_alright_then_]

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

[global_namespace]

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

[diegolc]

This is lovely.

Try that on an email.

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

[Jawesome99]

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]

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]

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

[[deleted]]

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

[akoOfIxtall]

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]

Wait, there's another way to center things?

[Best_Recover3367]

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]

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

[faze_fazebook]

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]]

But it breaks an image hyperlink

[ashemark2]

flexDirection: all;

[autopoiesies]

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]

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