Write Better CSS

This is a guide for anyone who knows how to cobble a page together with CSS, but isn’t sure how to be good at CSS.

You’ve put a few stylesheets together before, but keep finding yourself in a mess by the end. Let’s get started.

Reason for this guide #

One of the best things about CSS is it’s low barrier to entry, it’s so easy to pickup and make things! A little background-color: red there, a little font-family: Comic Sans MS here. Boom! You’re cooking!

But this gentle learning curve regularly proves to be a double-edged sword. Beginners stop learning and improving early on, satisfied that they “get” CSS. They’re left with a half-baked idea of what good CSS looks like, which paves the way to spaghetti stylesheets. 😢

This guide aims to take you the rest of the way, to Better CSS, without the blood, sweat and tears.

What’s covered? #

The guide is broken into a series of lessons that cover general CSS concepts, strategies for managing your stylesheets, and also deep-dives into specific topics. It includes:

What good and bad CSS looks like (warning: contains opinions).
What you can do to stop bad CSS rotting your stylesheets from the inside out.
Essential front-end tooling and architecture patterns.
Some of the more complicated and unintuitive CSS properties that often get ignored when learning CSS.

Who’s this guide for? #

This guide is for anyone who feels their CSS skills have plateaued at passable, but want to step up to the next level.

It’s for the full-stack engineers who know enough CSS to get by, but not enough to flourish. It’s for those fresh to front-end development that want to gain a more advanced understanding.

Let’s talk #

Hi, I’m Joe Forshaw, the author. If you have any questions, comments or corrections, please reach out to me on Twitter or by email.

Lessons