—Part of CSS Primer for the AI Era — Foundations
CSS has a quiet 'habit':
When something is true for a parent,
it often becomes true for its children.
The browser doesn’t apply CSS styles in isolation.
It reads the HTML as a 'tree of relationships',
and many CSS properties are designed to flow down that tree.
This is why children often inherit the voice of their parent
— the rendering engine treats the document as a 'hierarchy of meaning'.
Inheritance in CSS emulates the way humans intuitively expect things to behave:
“If this is the voice of the container,
its children probably speak with the same voice.”
It’s one of the forces that keeps CSS from becoming noise.
And in the AI era,
it’s one of the forces that keeps our conversations grounded.
Some properties naturally pass down the tree.
Others stay where they are.
The pattern is conceptual:
CSS inherits meaning, not mechanics.
This is why a 'single color' on a container can influence everything inside it,
while 'a margin' on the same container affects nothing below it.
The browser is not being clever or improvising.
It’s being consistent to the CSS engine rules.
Contrary to browsers following rules,
AI doesn’t “understand” CSS.
It predicts patterns.
So, when humans understand CSS 'inheritance',
we can guide those predictions.
For example:
“Let this component inherit the base typography instead of redefining it.”
or
“Remove the repeated color declarations — they’re inherited.”
or
“Reset the font-size here so it doesn’t compound.”
These are not commands. They are clarity signals.
They help AI see the shape of the system we’re building.
Most surprises come from two places:
a) Color flowing further than expected
A single color on a wrapper can cascade through dozens of nested elements.
When AI “breaks” a component’s color,
it’s often because it didn’t account for 'inherited color'.
So we can correct it gently:
“This component should not inherit color from its parent. Give it an explicit color.”
b) Font-size compounds
If a parent sets font-size: 80%
and a child sets font-size: 80%,
the child ends up at 64% of the root.
AI often treats each rule in isolation.
But we can steer it:
“Use rem so the size doesn’t compound.”
or
“Reset the font-size to 1rem inside this component.”
These small cues help AI avoid
accidental shrinkage or inflation.
Inheritance is one of the simplest ways to keep CSS results calm and predictable.
Instead of styling every element inside a section:
section p { font-size: 1rem; } section li { font-size: 1rem; } section blockquote { font-size: 1rem; }
We give the section a voice:
section { font-size: 1rem; }
Everything inside follows.
This reduces:
A quiet system is easier
for humans — and AI —
to reason about.
But sometimes a child needs its own voice.
So, we override inheritance when:
These overrides should feel intentional, not reactive.
Here's a helpful example cue for AI:
“This component should not inherit typography. Give it its own font-size and color.”
Here, 'overrides' become part of the design language,
not exceptions.
Here are some gentle, conversational phrases that help AI stay aligned:
“Let this element inherit the base color.”
“Avoid redefining font-family; it’s inherited.”
“Use inheritance to keep specificity low.”
“Reset the font-size here to avoid compounding.”
“Remove redundant declarations — they’re already inherited.”
“Don’t use inline styles; they block inheritance.”
These are not instructions.
They are literacy.
They help AI see the system we’re shaping.
If the cascade is the referee,
inheritance is the gravity.
This gravity is always present,
always shaping,
and predictable once we learn to feel it.
It lets meaning flow down the tree
so we can focus on intention,
not repetition.
And in the AI era,
understanding 'inheritance' gives us a way to speak clearly —
so we don't lose our agency,
and the system we build remains calm, coherent, and human.
Tony de Araujo —New York | Lisbon