I don’t know if I’m just stupid. I might be below average. I’ve got a PhD in CS, in a fairly easy area. I’d say I’m about an 8/10 coder. I definitely have a very bad memory and I don’t like big languages as I forget their syntax. Things like C++, Scala.

But… I’ve been writing CSS on an almost daily basis for three years now, after coming to it cold. And it is without doubt what I spent most time on during frontend dev. I use Vue. Occasionally I Google to check some Vue syntax I haven’t used for a while. But I am endlessly googling CSS.

The first thing I look for in a language (probably due to my goldfish memory, or because I’m actually a bit stupid compared to other coders) is a really small set of rules that I need to know to write any program. Lisp or Python easily fall into this bracket. But with CSS, it just seems endless.

There are so many many ways to do the same thing, I find myself making arbitrary choices all the time.

Without doubt though, the cascading precedence part of the design causes the biggest problems. A single component can have its styling defined across many an unlimited number of files. And each bit of styling might be defined with a different selector, meaning when I change something the specificity rule I use might “work” for some properties and not others. The often subtle interactions between parent and child properties are maddening.

Lots of folks might say - well you’re using it wrong, but most decisions are not made by me but rather other people designing frameworks, and given that these problems seem to be everywhere, it seems no one understands how you’re supposed to use CSS correctly. And if that’s the case - well, it has to be a failure to design a good language.

In other places in CS (eg some configuration file systems) where similar specificity and overriding mechanism can be found, the exact same confusion, mistakes, frustration, and time wasting occur. Anyone who has spent a lot of time working with those sort of mechanisms would have said - no, this doesn’t work, we have to simplify this or it will lead to a big mess.

For a long time I gave CSS the benefit of the doubt and assumed I was a complete idiot. After three years, I’m still spending a lot of time “debugging” CSS in Chrome’s dev tools and whilst I may not be super smart I’m fairly sure that the language has failed me. I’ve learnt some tricks, like only use flex box, and delegate absolutely everything you possibly can to a framework, but I’m not much wiser than day one.

I’d love to see someone who really understands PL design to write a replacement for CSS. An elegant design system language. I’m not a PL expert but the sort of characteristics I’d expect would be: concise, not spreading definitions across many files, a very simple or no precedence hierarchy, more akin to a programming language than a configuration syntax, with a type system that enables excellent dev tools and in particular a debugger and sandbox. One telling feature would be that adding new features would almost never mean extending the language, which would remain stable.

The !important syntax is either a bad joke or a tell, because no one with any serious background in language design would choose that syntax.