Why Do So Many Developers Struggle With CSS?

We’re going to kick off with a question: why do so many developers struggle with CSS? I’ve worked with a lot of really talented, capable developers in my career, proper full stack developers who were as happy working with SQL databases as they were writing HTML, and over the years it’s noticeable how many of them really didn’t enjoy working with stylesheets. We’d be working through a new feature - database schema migrations, new classes, backend, HTML, JavaScript, all absolutely fine, and then when it comes to styling the frontend… that was always the bit that nobody wanted to pick up.

There are folks out there who will tell you CSS isn’t even a programming language. The best way to deal with those people is ask them to draw a heading in 72 point dark blue Times New Roman using C++ and come back when they’ve done it. CSS absolutely is a programming language - it’s a structured language, with a formal grammar, that we can use to control part of a computer system. But CSS, on it’s own, doesn’t do anything. You can’t write an app using 100% CSS - CSS only works when you combine it with HTML, which means it’s often treated as an “afterthought” - first you make it work, THEN make it look nice. But, as you’ll see over the next few hours, CSS should never be an afterthought, and there is way more to it than just making websites look nice.

I think there’s a few more reasons why so many developers don’t enjoy working with CSS.

First: CSS isn’t procedural, it’s declarative. With languages like JavaScript or C#, you can read the code by starting at the beginning and following a series of instructions - do this, then do that, then do that. Of course, it’s not always quite that easy, but that procedural style means you can pause the program halfway through, attach a debugger, figure out exactly what’s going on right now - it’s step-by-step, like following a recipe. CSS is more like ordering takeaway food: you just specify what you want, and when it works? Awesome. But when it doesn’t work, you’ve got to work out why - and that could mean unpicking dozens of different CSS rules defined across different files and modules, figuring out which ones are applicable, which rules override other rules, how those rules interact with whatever else is on the page - and that’s hard. In this course, I’m going to show you a bunch of techniques I’ve learned over the course of my own career for debugging and troubleshooting CSS, and how you can use those to make sense of what’s going on.

Second: I think our industry has, historically, not done a great job teaching CSS as an engineering discipline. There’s a lot of great books and courses out there about CSS, but many of them are aimed at designers - folks who work with Photoshop or Figma, who understand the principles of graphic design, layout, colours and typography. You don’t need to be a great designer to be a great developer - some of the best developers I’ve worked with were absolutely terrible when it came to visual design - but you do need to understand the capabilities of the tech you’re working with.

Third: CSS is hard to test. It doesn’t crash. It usually doesn’t produce error messages. If you accidentally change a heading from being 100 pixels high to being 10 pixels high, it’s not going to break the build; your code still works, it just looks wrong - and unless you pick it up during manual testing, you’re not going to know about that until somebody files a bug saying “the website looks weird”.

Fourth: many parts of CSS are inconsistent, and some bits of it are just plain wrong. There’s a wonderful page up on the CSS working group’s wiki called “Incomplete List of Mistakes in the Design of CSS” that documents a whole bunch of things which, with the benefit of hindsight, should probably have been named, specified, or implemented differently. The problem is popularity. CSS is so widely used, as soon as something’s part of the spec, there will be real websites out there in the real world that rely on it: websites that aren’t actively maintained, or very, very hard to update… if you’ve bought a broadband router, or a printer, or a network camera in the last twenty years, it’s probably got a web interface built-in. I’ve got bits of gear on my home network that are so old the web interface was designed to work with Internet Explorer 6… fortunately, the maintainers of web standards like CSS have worked incredibly hard to make sure that if something worked 20 years ago, it’ll still work today, but the downside of that is that CSS - and HTML, and JavaScript - are riddled with historical quirks and things that seemed like a good idea at the time.

And finally, and probably because of all the reasons we just talked about: most CSS you’ll find in the wild is terrible. Development teams focus on features, data, performance; the CSS gets bolted on as an afterthought, hacked around using increasingly complex rules until it sort of mostly looks good enough… then the next developer comes along, can’t make any sense of what’s already there, and every time they modify it somebody complains that it’s broken something on a completely different part of the website, so instead of being evolved and maintained over time, we just keep adding new layers on top of everything that’s already there, until you’ve got a site with ten different kinds of buttons on it and nobody knows what’ll break if you change one.

Now, if you’re one of the folks for whom all of the above feels painfully true, I have bad news: CSS isn’t going away. Ever. It’s one of the fundamental building blocks of the web. You can write your backend and your microservices in anything you like - Java, C#, PHP, Go - but when it comes to end users, the best way to deliver your solution is the web, and the web runs on HTML, JavaScript, and CSS. Even desktop applications these days are often built using frameworks like Electron, which rely on CSS for styling and interaction design.

There is good news too, though - and the good news is that CSS is actually pretty awesome now. If, like a lot of developers, you learned a bit of CSS early on in your career and haven’t really gone back to it, you’re in for all kinds of fun. We’ve got grids and flexbox layouts, animations, keyframes, transformations… CSS even has variables now. A lot of layouts and designs that used to be really complicated are now fairly straightforward - and those new features also mean we can build all kinds of new interfaces and capabilities into our web applications. Sound good? Alright, let’s kick things off.