For a lot of front-end developers, CSS is the most frustrating part of their work.
When you make a mistake in TypeScript, you get a helpful tooltip telling you exactly what you did wrong. In CSS, by contrast, you’re left in the dark, without any clues about why you’re not getting the result you expected.
These constant bewildering surprises take us out of flow state, and shake our confidence. No wonder so many of us don’t enjoy writing CSS!
Despite all appearances, though, CSS is actually a deeply consistent and robust language. It feels unpredictable because there are complex systems involved, systems that are totally invisible to us.
CSS is an implicit language.
It doesn’t matter how many years you spend practicing CSS—if you don’t learn how its underlying systems work, your mental model will always be incomplete.
Think about how most of us learn CSS: we learn how individual properties work, instead of focusing on how layout algorithms use those properties as inputs. We learn “cool tricks” for specific situations, instead of concepts that can be applied broadly to any situation.
Nobody is born with CSS skills.
We assume that we’re missing some sort of “CSS gene”, that we’re just not good at this stuff. And it’s the most unfair self-criticism in the world. If you learn the rules of CSS, you can be good at it too!
Becoming proficient with CSS is game-changing. All of a sudden, the most frustrating part of your job becomes fun! As JS developers, we spend so much energy trying to avoid writing CSS, when we could be embracing it, and using it to build world-class user interfaces.
So how do you learn the rules of CSS? Well, you can spend countless hours spelunking through MDN documentation and CSSWG specifications, and then spend a few years practicing. That’s what I did. It was undeniably effective—the end result is incredibly worthwhile—but the journey was long and arduous.