CSS rant

Originally posted as a Twitter thread.

People ask “what’s wrong with CSS?” Why do people need to invent things to circumvent how to write CSS? Why css-in-js? Why tailwind? Why not embrace the cascade like it was intended?

Well, a few things are not ideal about raw CSS. Let’s dive in.

CSS shortcomings

CSS comes from when the web was mostly documents, not apps. You slapped some global styles, a handful of stuff needed class names, you let the cascade do its thing and you were done. Today this approach falls short. Lots of things need style. Globals and cascade are no good.

Naming things

Having to name every single thing that you want to give styles to is tiresome.

Didn’t they get the memo that naming things is among the hardest things in programming? Now imagine having to come up with names for every nook and cranny of your markup, just so that you can style it. 😩

The cascade

I already mentioned it before. A cool idea for documents. Not so much for apps. We have better ways to reuse and get consistency. Heck, we even have native css variables nowadays.

Don’t get me wrong. It’s a good feature. But it is no good when overused. And it does not play nice with component-based architectures.

The forgiving nature of CSS

Thanks, but no thanks.

I want my CSS to yell at me if I mistype something that will result in a broken user experience. We have build tools today to take care of this. I want my builds to fail if I’m using a CSS variable that does not exist.

The global nature of CSS

Again, a neat idea for boring old and simple documents markup. With apps this does not scale. No wonder most frameworks have the concept of scoped per-components styles.

What can we do?

These are just the issues that came to mind off the top of my head. And I’m no expert nor have I thought this through. This is just based on my experience and pains working with css daily. Call me dumb if you will, for not having mastered CSS as it was intended to be used.

Let’s get rid of this notion that CSS has to be handcrafted and nurtured by hand. CSS can perfectly be a compilation target. It’s ok to have higher level tools generate the lower level CSS that we ship to our users.

Tools like css-in-js and tailwind are ways to better deal with these shortcomings. There are trade offs when using these. But what choice does not come with trade offs? Everything is a trade off.