CSS is hard. At first, it looks deceptively simple. We can change the color of a heading to red. Cool! But there are a ton of ways to apply visual styles to an element or set of elements by applying different selectors. And when those selectors come in conflict, how do we determine which style wins? And the sheer number of ways we can style an element is dizzying. And constantly evolving. And which browsers support which features?
Let's say you've spent years figuring all this stuff out and you have Opinions™ on how it all should be done. But now you're working in a codebase with multiple people who have varying degrees of experience and interest in CSS and also have Opinions™. How do we scale our CSS in a way that doesn't lead to spending hours fighting to override some existing styles just to get the thing to look like the picture?
There are two options:
-
Teach everyone to be good at CSS and agree as an industry to all approach it the same way. (Yeah right.)
-
Write CSS in such a way that no one has to write CSS ever again.
As much as I've tried, the first option is just not feasible. The second option, while seeming impossible, is what I'll aim to teach you in this book.
My name is Mike Aparicio, and I've been making websites since before CSS was even a thing — when all we had were some HTML attributes, some creative abuse of the table element, and a whole lotta gumption.
Since then, our design tools and tech stacks have seen constant change. But while new tools have augmented how we write CSS, and CSS itself has evolved quite a bit, nothing has replaced CSS.
Design Systems are all the rage now, and for good reason. They help align our design choices with their technical implementation. They help make the thing look like the picture. That's squarely the realm of CSS.
CSS can be the backbone of your design system, supporting any tech stack (since we'll inevitably be changing it every couple of years), allowing rapid prototyping and helping deliver frontend code instead of pictures of websites, freeing up your designers and developers to solve real problems rather than going back and forth trying to make the product look like what's in the designer's head.
There's never been a more exciting time to be writing CSS! So let's learn how to never do it again.