How structure shapes meaning,
clarity, and collaboration with AI
—Part of CSS Primer for the AI Era — Structure
Before CSS can style anything,
and before behavior can animate anything,
there must be structure —
the shape of the interface.
Structure is the arrangement of:
It is the skeleton that everything else depends on.
A quiet mental model:
A component is a small piece of 'meaning' —
a 'shape that holds content, style, and behavior together'.
Components are not a CSS concept.
They are not a JavaScript concept.
They are not a PHP concept.
Components are a 'design systems concept' —
a way of thinking about interfaces as
'modular, meaningful pieces'.
A component is:
Examples:
A component is not defined by its technology.
It is defined by its intent.
A button is a button whether it is:
The technology changes.
The shape does not.
Components matter because they give us:
Without components,
everything becomes:
A quiet truth:
CSS is only as clear as
the structure it styles.
In the old paradigm, humans learned:
Because the human brain couldn’t hold the whole system at once.
In the AI era,
the human no longer needs to memorize syntax.
They need to understand relationships.
Structure is the bridge:
A component is where these layers meet.
We don’t need to write JavaScript.
We need to understand what JavaScript does
so we can ask AI for the right thing.
A component is not just 'a box'.
It has an internal structure — 'a shape'.
For example, a card might have:
A navigation bar might have:
This internal shape is what CSS styles.
The shape is what AI needs to understand.
Humans must describe it clearly.
A quiet principle:
If the structure is unclear,
the styles will always feel fragile.
A component should:
Boundaries create stability.
When boundaries are clear:
Boundaries are the difference between:
Names are not labels.
Names are intent.
Good names:
Bad names:
A quiet rule:
Name things for what they are,
not how they look.
AI does not “see” the whole codebase.
AI only sees what we show it.
This means:
AI can style a component beautifully —
but only if the human shows it the structure.
A quiet reminder:
AI can propose.
Humans provide the shape.
This Structure topic will explore:
This is not about syntax.
It is about thinking.
Structure is the foundation of clarity.
Clarity is the foundation of collaboration with AI.
Tony de Araujo —New York | Lisbon