Table of Contents
01. What Components Are and Why They Matter
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:
- HTML elements
- nested relationships
- naming conventions
- component boundaries
- the internal “shape” of a UI
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'.
1. What a Component Is
A component is:
- a self‑contained piece of UI
- with a clear purpose
- with predictable internal structure
- with a name that expresses meaning
- with styles that belong to it
- with behavior (if needed) that belongs to it
Examples:
- a card
- a button
- a navigation bar
- a list item
- a form field
- a modal
- a tag or badge
A component is not defined by its technology.
It is defined by its intent.
A button is a button whether it is:
- HTML + CSS
- HTML + CSS + JavaScript
- PHP generating HTML
- a React component
- a DokuWiki template
- a WordPress block
The technology changes.
The shape does not.
2. Why Components Matter
Components matter because they give us:
- clarity
- modularity
- reusability
- predictability
- maintainability
- a shared language
- a way to talk to AI
Without components,
everything becomes:
- tangled
- brittle
- hard to style
- hard to reason about
- hard to change
- hard for AI to understand
A quiet truth:
CSS is only as clear as
the structure it styles.
3. Structure Is the Bridge Between HTML, CSS, and Behavior
In the old paradigm, humans learned:
- HTML separately
- CSS separately
- JavaScript separately
- PHP separately
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:
- HTML expresses meaning
- CSS expresses appearance
- JavaScript expresses behavior
- PHP (or backend logic) expresses data and flow
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.
4. Components Have Internal Shape
A component is not just 'a box'.
It has an internal structure — 'a shape'.
For example, a card might have:
- a container
- a header
- a body
- an image
- a footer
A navigation bar might have:
- a wrapper
- a logo
- a list of links
- a search field
- a user menu
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.
5. Components Have Boundaries
A component should:
- contain its own parts
- not leak into other components
- not depend on global quirks
- not rely on accidental structure
- not require fragile selectors
Boundaries create stability.
When boundaries are clear:
- CSS becomes simpler
- AI can reason about the component
- changes become safer
- behavior becomes predictable
- the system becomes maintainable
Boundaries are the difference between:
- a system
- and a pile of code
6. Components Need Names That Express Meaning
Names are not labels.
Names are intent.
Good names:
- describe purpose
- describe meaning
- describe role
- help AI understand the structure
- help humans understand the structure
Bad names:
- describe appearance
- describe temporary hacks
- describe layout instead of meaning
- confuse AI
- confuse humans
A quiet rule:
Name things for what they are,
not how they look.
7. Why Components Matter in the AI Era
AI does not “see” the whole codebase.
AI only sees what we show it.
This means:
- humans must provide structure
- humans must provide context
- humans must describe the component
- humans must show the relevant HTML
- humans must show the relevant CSS
- humans must guide AI through the shape of the interface
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.
8. What This Topic Will Cover
This Structure topic will explore:
- what components are
- how HTML, CSS, and behavior work together
- how to name things clearly
- how to nest components intentionally
- how to avoid brittle structures
- how to describe structure to AI
- how to reason about component boundaries
- how to use patterns like cards, lists, and media objects
- how structure supports clarity and maintainability
This is not about syntax.
It is about thinking.
Structure is the foundation of clarity.
Clarity is the foundation of collaboration with AI.
- Suggested Next Reading: 02. HTML + CSS + Behavior — The Three Layers of an Interface
Tony de Araujo —New York | Lisbon