—Part of CSS Primer for the AI Era — Foundations
CSS is often described as unpredictable.
But unpredictability isn’t the truth — context is.
Every CSS property, every layout decision, every computed value
depends on where the element lives,
who its parent is,
what came before it,
and what surrounds it.
CSS is not a list of rules.
It is a system of relationships.
Understanding context is what turns CSS
from a guessing game
into a conversation.
Context is the environment an element exists in:
CSS never applies a rule in isolation.
It always asks:
“In this situation, what should this element do?”
This is why the same property can behave differently
in different places.
AI‑steering cue
“Explain how the parent’s layout mode affects this element.”
The parent defines the environment the child lives in.
Here are a few simple examples:
The child does not choose its context.
It inherits it.
This is why layout often changes when we wrap elements in new containers.
AI‑steering cue:
“Don’t wrap this in an extra div — it changes the layout context.”
Many CSS properties depend on a containing block —
the rectangle the browser uses as a reference for:
The containing block
is not always the parent.
The parent can be:
This is why an element can “jump”
when we add position: relative
to a parent we didn’t think mattered.
AI‑steering cue:
“Tell me which element is acting as the containing block for this absolute element.”
CSS has several “worlds” where layout rules change:
Each world has its own physics.
For example:
These contexts are invisible,
but they shape everything.
AI‑steering cue:
“Explain which formatting context this element is in and how it affects layout.”
Margins between block elements
can collapse:
But they don’t collapse in:
Margin collapsing is not a bug.
It is a contextual rule.
AI‑steering cue:
“Avoid margin collapsing by creating a new block formatting context.”
Inheritance is also contextual.
A child inherits:
…but only if the parent has those properties set
and only if the property is inheritable.
Context determines:
AI‑steering cue:
“Let this element inherit typography from its parent instead of redefining it.”
CSS is not a system of fixed rules.
It is a system of conditional rules.
A property means one thing in:
This is not inconsistency.
It is by design.
CSS adapts to context
because documents are complex,
and meaning is layered.
AI‑steering cue:
“Before changing the property, explain how context is affecting it.”
AI often treats CSS as if
each rule stands alone.
This leads to:
We can guide AI back
to the system:
“This layout is breaking because the parent is a flex container.”
“Remove absolute positioning — it takes the element out of context.”
“Use normal flow; the context already supports this layout.”
Context is the quiet force behind CSS.
It explains:
CSS is never absolute
because documents are never absolute.
When we understand context,
we stop fighting CSS
and start collaborating with it —
and with AI.
Tony de Araujo —New York | Lisbon