I feel like utility classes had their moment and we can now start to pull back towards semantic CSS with the help of new features like CSS custom properties.

Instead of .f-green in your HTML you can do --f-green in your CSS.

<header class="f-green"></header>

would become

header { color: var(--f-green); }

or if you really hate CSS and must stay in HTML

<header style="var(--f-green)"></header>

Though the literal naming is a touch too specific anyway. Something like this is wonderful:

--f1-color: green;

header { color: var(--f1-color); }

then you don't have to do confusing things like

header .f-green { color: red; }

because you can do

header { --f1-color: red; }

So we can be less specific AND more modular... because you can have that f1 (font1) color be red in your header, and still do:

footer { --f1-color: green; }

We can make really flexible and extensible systems with modern vanilla CSS. No frameworks or preprocessors needed.

It's extremely important to create classes like `.f-green` in case the definition of green ever changes. That's what we call forward portability.

Also, if your company rebrands from green to red you can just `.f-green {color:#f00;}` - it's so efficient!

Yep, Tailwind didn't invent style tokens or composable classes! After learning Foundation, Tachyons, Material UI, Chakra...I was happy to see we finally settled on Bootstrap.

Oh, we didn't? Well, time to learn a new syntax. (Was it `dark:md:hover:text-slate-400` or `hover:md:dark:text-slate-400` again?) At least Tailwind arguably has more benefits than its predecessors.

I will always argue against this. Keep your layout in one file and your styling in another. I've done more CSS than most in heavy web production and I never once had a reason to think something like this would be faster or more efficient.

So visionary to be considered a wtf. Thanks for the submission, made my day !

This is what I did before stumbling on BEM - https://en.bem.info/methodology/css/

Back in the day we made fun of this nonsense, now we freakin glorify it with libraries like Tailwind & friends...

[dead]