03. Blocks, Elements, and Modifiers — A Mental Model for Components

How 'naming' expresses structure,
intent, and clarity

_{—Part of CSS Primer for the AI Era — Structure}

Components are easier to understand when
their 'internal structure' is expressed clearly.
This also makes it easier for AI to work with them.

One of the simplest ways to think about structure
is the
Block / Element / Modifier
'mental model'.

The BEM visual mental model:

A 'block' is a thing.
An 'element' is a part of the thing.
A 'modifier' is a variation of the thing.

This model gives humans and AI
a 'shared language' for describing structure.

A 'block' is a standalone component —
a meaningful piece of UI that can exist on its own.

Examples:

• card
• button
• nav
• form-field
• modal
• tag

A block:

• has a clear purpose
• contains its own parts
• does not depend on external structure
• can be moved or reused
• can be styled independently

A quiet principle:

If it can stand alone,
it is a block.

An element is a part of a block —
something that only
makes sense inside that block.

Examples inside a card block:

• card_header
• card_body
• card_footer
• card_image

Examples inside a nav block:

• nav_list
• nav_item
• nav_link

Some characteristics of Elements:

• belong to the block
• cannot exist on their own
• inherit meaning from the block
• help AI understand the internal shape
• make CSS more predictable

A simple rule:

If it is part of the block’s internal structure,
it is an element.

A modifier expresses a variation —
a change in appearance, tone, or behavior.

Examples:

• button–primary
• button–small
• card–highlighted
• nav_item–active

Modifiers:

• do not change the structure
• do not create new components
• simply adjust the existing component
• help AI understand intent (“make this the active item”)

A simple truth:

Modifiers express difference without
breaking the component.

This model gives us (and AI):

• clarity
• predictability
• a shared language
• a way to describe structure to AI
• a way to avoid brittle selectors
• a way to keep components self‑contained
• a way to reason about nested parts

It also helps AI understand:

• what belongs together
• what is a variation
• what is a part of what
• what should be styled together
• what should not be touched

A quiet reminder:

AI can style a component beautifully
but only when
the structure is clear.

Let’s take a simple example: a card.

Block

<div class="card">

Elements

  <div class="card__header">...</div>
  <div class="card__body">...</div>
  <div class="card__footer">...</div>
</div>

Modifier

<div class="card card--highlighted">

This structure tells AI:

• what the component is
• what its parts are
• how the parts relate
• what variation is being applied

It also makes CSS simpler, clearer, and more maintainable.

This is not about strict naming conventions.
It is about thinking in components.

We can adapt the naming:

• card-header instead of card_header
• is-active instead of nav_item–active
• variant=“primary” in a framework
• data-state=“open” for behavior

The model remains the same:

• blocks
• elements
• modifiers

A simple truth:

The names can change.
The thinking stays the same.

AI does not “see” the whole codebase.
It only sees what we show it.

Clear structure helps AI:

• reason about components
• propose safe changes
• avoid breaking unrelated parts
• generate consistent CSS
• understand variations
• maintain boundaries

A quiet reminder:

Structure is guided by human judgment.
Style becomes collaborative
once the structure is understood.

*Suggested Next Reading: Naming and Shape: How Structure Supports Style

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←