Why is CSS so hard for programmers?

I started my web career with HTML and CSS. Back in the early 2000’s I made my first website with tables and a bit of CSS. It was dreadful — tables all over the place. Even so, I was incredibly proud of myself.

I feel like I started my journey into the web a little differently to most front end developers. I stuck with HTML and CSS for a long time before someone taught me JavaScript, and not until relatively recently did I fully immerse myself in that world. Most people I work with come from a computer science background, with experience in mostly backend languages, who then moved into JavaScript and front end development.

Cue my surprise when, one after the other, they started confessing they don’t understand CSS. It doesn’t make sense to them. “It’s a dark art and it doesn’t make sense.” For a while, I never understood why that is. You’re basically just creating a configuration file with a bunch of keys and values. So why is that so hard to grasp? With a background in programming — complex systems, networking, performance, async code, design patterns — surely CSS is nothing to worry about?

On the other hand, I’ve always struggled when people come to me with CSS questions. In general, the question goes like this: “How do I move this element over there?” or “I can’t get it to look like the design, what am I missing?” The answer is never straight-forward. There’s generally a legacy codebase with CSS that no one has touched in a few years, along with hacks for a bunch of browsers, screen sizes, what have you.

The reason those questions are hard for me is mostly due to my CSS workflow. I tend to approach a CSS problem by trying a few things to see how it interacts with the surrounding elements. Change the display type, add/remove some margin, play around with flex, etc. Then you can start honing in on the changes required to get to the end result. Add a class here, create a modifier there, clean up, check again and done.

In that sense, it’s much less like programming, and much more like art. Like mixing colours, adding a brush stroke, rinse and repeat to get the result you want. This explains why it’s so hard for me to give someone direction on how to write CSS, just like you can’t tell someone very reliably to pick up there brush, put a stroke right there, in that direction, with this much pressure, taper off near the end…

“CSS is less programming, more art”

In the same vein, if you’re an awesome logical thinker but have no artsy bone in your body, the above will be very hard to learn. I do however believe you can learn. It just comes down to changing your mindset. Try just playing around with a few rules, see where you get. Have fun with it! It’s not as scary as you think, and there’s always git reset --hard ;)