What is wrong with CSS?

Let’s face it - designers love CSS. If you have no background in programming, it gives you that amazingly simple programming-ish control over how things are presented in the browser. You write your

a:hover { text-decoration:none !important; }

and instantly feel a bit more !important as well.

And it works. Basically, it works. Especially, when your project is a small Wordpress based website you created fully by yourself. Then as a proudly self-nominated Front-end Jedi, you join some bigger project and Cthulhu awakes.

Web technology evolves. Hypertext was the world changing idea and HTML in the current form drives the Web. Javascript got mature as a language and has bright future. Ok, it will pass away eventually but not in the next 10 years. Unfortunately, the time is not so generous for CSS. What’s wrong? After 8 years on the front-line, my answer is:

Everything that people think is good about it.

The problems start with the core idea: cascading. Unintentional targeting is the single biggest pain in the ass of every project. If you’re a programmer, imagine that you have all your variables in a separate file… all global. That’s it. That’s what happens here.

To fight that madness, people use naming conventions like BEM or inline styles to avoid what was advertised as the biggest advantage of that technology.

I don’t even touch stuff like browser compatibility or a really messy concept of “floats”. The core idea of CSS does not work well with modern development.

What’s the solution? Long story short: component-centered styles. I sympatize with powerful CSS preprocessors like Clay but it’s possible that the ugliest bike in the town works the best: inline styles.