_{—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:

• its parent
• its siblings
• its ancestors
• its display type
• its position in the DOM
• the layout mode it participates in
• the writing mode
• the viewport
• the container it belongs to

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:

• A child inside a flex container becomes a flex item.
• A child inside a grid becomes a grid item.
• A child inside a block participates in normal flow.
• A child inside an inline formatting context behaves like text.

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:

• percentage widths
• percentage heights
• absolute positioning
• fixed positioning (in some cases)
• transforms
• viewport units (in some cases)

The containing block
is not always the parent.
The parent can be:

• the nearest positioned ancestor
• the nearest transformed ancestor
• the viewport
• the root element

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:

• Block formatting context (BFC)
• Inline formatting context (IFC)
• Flex formatting context
• Grid formatting context
• Table formatting context

Each world has its own physics.

For example:

• In a BFC, floats are contained.
• In an IFC, vertical margins don’t collapse.
• In flex and grid, margins behave differently.
• In grid, items can overlap without positioning.

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:

• parent and first child
• parent and last child
• adjacent siblings

But they don’t collapse in:

• flex containers
• grid containers
• inline formatting contexts
• block formatting contexts
• absolutely positioned elements

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:

• color
• font-family
• line-height
• text-align

…but only if the parent has those properties set
and only if the property is inheritable.

Context determines:

• what is inherited
• what is overridden
• what is computed
• what is ignored

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:

• normal flow
• another in flex
• another in grid
• another when positioned
• another when transformed
• another when nested
• another when inherited

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:

• unnecessary flex containers
• absolute positioning used as a shortcut
• fixed widths that break responsiveness
• ignoring containing blocks
• misinterpreting inheritance
• overriding instead of relying on context

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:

• why things move
• why things overlap
• why things stretch
• why things shrink
• why things wrap
• why things ignore us
• why things behave differently in different places

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.

• Suggested Next Reading: Selectors

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←