Josh Comeau writes excellently on the mental model shift that enables you to understand CSS better:

A few years ago, I had a Eureka! moment with CSS.

Up until that moment, I had been learning CSS by focusing on the properties and values we write, things like z-index: 10 or justify-content: center. I figured that if I understood broadly what each property did, I’d have a deep understanding of the language as a whole.

The key realization I had is that CSS is so much more than a collection of properties. It’s a constellation of inter-connected layout algorithms. Each algorithm is a complex system with its own rules and secret mechanisms.

It’s not enough to learn what specific properties do. We need to learn how the layout algorithms work, and how they use the properties we provide to them.

Have you ever had the unsettling experience of writing a familiar chunk of CSS, something you’ve used many times before, only to get a different and unexpected result? It’s super frustrating. It makes the language feel inconsistent and flaky. How can the exact same CSS input produce a different output??

The concepts of layout algorithms and block formatting contexts are at least two things that CSS hides from you. Your typical high-level programming language like C# or Java are categorized as such in part because they abstract away a lot of the low-level concerns like manual memory management, the underlying hardware, architecture, or even how memory is laid out in general.

Before we get too carried away, the point I want to make is this: CSS very much abstracts away a lot, and I mean a lot, from what the browser is actually doing when it comes to styling our HTML, and the language has nothing within it that makes the aforementioned concepts transparent.

This wasn’t too much of any issue when the web was still seen as a series of textual documents, but nowadays there’s a lot of demand for magazine-esque layouts with a lot of imagery and flourish, all while needing to be laid out across various devices and form factors. CSS just wasn’t built with that in mind, so not knowing about formatting contexts at that time didn’t incur a lot “negative feedback” as it so often does today.

When you’re working with CSS, you are almost always operating under unknown unknowns.

This is why, despite it being easy to generally write CSS (the syntax is certainly not difficult), once a certain threshold of complexity is reached in a project, those unknown unknowns really come to bite you in the shins.

Comeau’s post (and his other one on stacking contexts) is great for explaining these concepts and putting them in our court of attention. Reading these and understanding how things actually work can make dealing with CSS a bit more tolerable.

In my previous post I mentioned that one of my goals this year is to create the initial version of a minimalist pure CSS framework “for backend devs”. By that last bit what I mean is that it’s meant for those that just want to display the output of their controller/service logic onto the screen without wasting an exorbitant amount of time styling.

Obscured but essential concepts like block formatting contexts, stacking contexts, and layout algorithms honoring certain properties but not others, all should be closer to the forefront than not, and I hope to provide something that helps align your thinking that goes with the grain of language rather than papering over it or avoiding it entirely.