Hey Devs, I’m a backend developer experimenting with frontend development. I have no trouble using React and am fully capable of working with it. However, I’ve realized that React alone isn’t enough to create an interactive UI—it all comes down to CSS.

Every time I tweak my CSS, I end up feeling more frustrated and demotivated. What should I do, and what should I avoid? What should I focus on learning to improve my CSS skills?

I’d really appreciate any tips or guidance!

Tailwind is absolutely awful.

I used bootstrap back in the day and I did eventually come around to realising how awful that was too.

Littering your HTML with crap like this:

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg outline outline-black/5 dark:bg-slate-800 dark:shadow-none dark:-outline-offset-1 dark:outline-white/10">

It's MASSIVELY inefficient - it's just lazy-ass utility first crud.

It may be super easy for people who cannot be bothered to learn CSS - so the lazy-ass bit - but for anyone who KNOWS css, it's fucking awful.

You have to learn an abstract construct cooked up by people who thought they knew what they were doing - who used bootstrap as a reference point.

Once upon a time, CSS developers who KNEW CSS figured that the bootstrap route was the bees-knees, the pinnacle of amazingness.

Then that house of cards fell on its ass - ridiculously hard to maintain, stupidly repetitive - throws the entire DRY methodology out the window. Horribly verbose. Actually incredibly restrictive.

This is from someone who drank the coolaid - heck, who was around BEFORE bootstrap, when this kind of flawed concept reared it's ugly head.

What you want is scoped css that is uglified, minified and tree shaken at build time - and what you want is a design system.

Something like this, in uncompiled code:

<Component atoms="{{ display: "flex", gap: "<variable>", backgroundColor: "<variable>"}} className={styles.WeCanHaveCustomCssToo}>...</Component>

When compiled down and treeshaken and uglified, it may end up being:

<div class="_16jmeqb13g _16jmeqb1bo _16klxqr15p"> ... </div>

It's scoped, on each build it's cache busted, it's hugely efficient and it's a pleasure to work with.

Most importantly, there's patten recognition in the compile process, where anything with the same atoms ends up with the same compiled classname, ditto for custom classes that could fall outside of a design system.

I'm not going to claim this concept is simple, it isn't, but it's for developers who understand CSS, who understand why CSS is important and who realise just how bloody awful tailwind is.

tailwind is ass.

I've been working on CSS tooling (on and off) since August 2013, when I wrote AbsurdJS. Later, in January 2016, I "invented" CSSX - writing CSS directly in JavaScript. None of those became a thing, but they were incredibly interesting experiments. I had some time during the holidays and decided to materialize an idea that I'm shaping the last couple of months. And so I "accidentally" wrote a CSS compiler. It's called Azbuka (it means "alphabet" in Bulgarian).

A bar stool in a completely different bar falls over.

I've been learning CSS for a few days now (at least 10 hours), and don't know when would be the appropriate time to tackle JS.

Hi! Im trying to make a classic container with texts and buttons inside but with a glass/blur background semi-translucent like the image attached with CSS for a website and Im not able to make just the background of the container blurred, the code makes the whole thing blurred and thats not what I want.

May somebody help me? I barely know CSS and it is being imposible…

Hello everyone

I wrote an article about a little comparison between css in js tailwind and vanilla css

I really appreciate giving me your opinion about this.

Thank you in advance

https://medium.com/@sayahayoub9827/the-real-cost-of-styling-what-actually-happens-in-the-browser-0170492611f5