CSS Child / The Cascade

Stop learning properties and start learning the model beneath them.

Most people who struggle with styling have not learned too little. They have learned a long list of things without the small set of ideas that holds the list together.

There is a particular feeling that arrives early when you learn to style web pages, and it is worth naming, because naming it is the first step out of it. You write something. Nothing changes. You write something else. Something changes, but not the thing you meant. You add another line, and now two things are wrong. Within an hour you are not designing anything, you are negotiating with a system whose reasoning you cannot see. Almost everyone goes through this. Very few people are told that the problem is not their memory, their talent or their patience. The problem is that they have been handed a vocabulary without a grammar.

A reference will tell you what each individual instruction does. It will not tell you why the browser chose one instruction over another, why a space appeared where you did not ask for one, or why a design that looked perfect on your screen came apart the moment someone typed a longer name into it. Those answers do not live in any single entry in the list. They live in the model: a small number of ideas about how style is chosen, how space is measured, how arrangement is described, and how a design behaves when reality pushes on it. Learn those, and the list becomes readable.

This magazine exists for that reason. Every article here refuses to give you syntax. There is not a single instruction, name or symbol anywhere in these pages, and that is deliberate rather than coy. If we hand you the words, you will reach for the words. If we hand you the model, you will understand any set of words you meet later, including the ones invented after this was written. You can pick up the vocabulary from any reference in an afternoon. The grammar takes longer, and almost nobody teaches it directly.

There are four ideas here, and they are genuinely the whole foundation. The first is that style is chosen, not simply applied: many rules compete for the same element, and one of them wins by a set of tie breaks you can learn and predict. The second is that every element occupies space as a set of nested rings, and that the outermost ring behaves in ways that surprise people who have never had it explained. The third is that arrangement is a statement of intent rather than a set of coordinates, and that saying what you want is different from saying where things go.

The fourth idea is the one that separates people who can make a page look right from people who can make a page stay right. A design is not finished when it looks good with the content you invented for it. It is finished when it survives content you did not choose: a title three times longer than the one in your sketch, a description that is one word, a name that will not break onto a second line, a viewer who prefers a dark background, a screen half the width you designed for. Until then it is a picture of a design rather than a design.

None of this is difficult, and none of it requires you to be clever. It requires you to be curious in a particular direction, which is inward rather than onward. The single most valuable habit you can build is this: when something does not work, find out why before you try anything else. Not what fixes it. Why it is happening. That habit is slower for a week and faster forever afterwards. Everything in this issue is written to support it, patiently, from the beginning, with no assumption that you already know anything at all.