Table of Contents
07. Structure Summary — What It Can and Cannot Do
What structure offers, where it stops,
and how it supports collaboration with AI
—Part of CSS Primer for the AI Era — Structure
Structure is the foundation of every interface.
It gives meaning to content,
shape to components,
and clarity to the relationships between parts.
Structure is the layer that makes CSS predictable
and makes AI capable of reasoning about the page.
But structure is not everything.
It has limits — and understanding those limits is part of working calmly and intentionally in the AI era.
Mental model:
Structure expresses what something is.
Style expresses how it feels.
Behavior expresses how it acts.
Each layer depends on the others,
but none can replace them.
What Structure Can Do
Structure can:
- express meaning
- define component boundaries
- reveal internal shape
- make CSS simpler and calmer
- reduce specificity battles
- support accessibility
- make components portable
- help AI understand relationships
- guide AI toward safe, predictable changes
- create a shared vocabulary for collaboration
Structure gives the interface its form — the architecture that everything else rests upon.
A quiet truth:
When the structure is clear,
the rest of the system becomes lighter.
What Structure Cannot Do
Structure cannot:
- create visual hierarchy
- express tone or atmosphere
- control spacing, rhythm, or density
- communicate emotion
- animate or respond to state
- validate input or manage flow
- replace CSS or behavior
- compensate for unclear naming
- fix a component whose purpose is undefined
Structure is necessary, but not sufficient.
It prepares the ground; it does not complete the experience.
A quiet reminder:
Structure can hold meaning,
but it cannot create feeling.
Where Structure Ends and Other Layers Begin
Structure ends where:
- appearance begins (CSS)
- interaction begins (behavior)
- data flow begins (backend logic)
- state begins (JavaScript or server‑side)
This boundary is not rigid — it is cooperative.
Each layer informs the others,
but none replaces them.
A calm model:
- HTML gives the shape
- CSS gives the expression
- Behavior gives the life
Together, they form a complete component.
Why Structure Matters in the AI Era
AI does not infer structure.
It only sees what we show it.
Clear structure helps AI:
- understand the component
- understand its parts
- avoid touching unrelated elements
- generate consistent selectors
- propose safe changes
- maintain architectural clarity
Structure is how humans communicate intent to AI.
Closing thought:
Structure is the language of clarity.
It tells AI what the component is,
so style and behavior can follow with confidence.
- Suggested Next Reading: Working with Existing Code: Preface
Tony de Araujo —New York | Lisbon