CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


foundations:how_css_thinks

1- How CSS Thinks

— the quiet mental model behind everything

CSS looks like a list of rules, but underneath the syntax there is a simple idea:

CSS is a conversation
between the browser and the document
about how things should appear
.

It’s not a programming language.
It’s not a layout engine.
It’s not a set of commands.

CSS is a negotiation.

You describe intentions.
The browser interprets them.
The final result is the outcome of that negotiation.

To collaborate with AI,
you don’t need to memorize properties.
—You need to understand the forces
that shape this negotiation
.

Those forces are:

  • the cascade
  • specificity
  • inheritance
  • flow
  • context

Once you understand these forces, everything else becomes vocabulary.

The key here is not to memorize their names, but to become aware of them by revisiting the list occasionally and thinking about everything else we are going to cover in this wiki.


1. The Cascade — CSS’s decision‑making process

The cascade is how CSS decides which rule wins when multiple rules apply.

It considers three things, in order:

  1. Where the rule came from (author, user, browser)
  2. How specific the selector is
  3. Which rule appears last

This is why AI sometimes generates CSS that “does nothing”
— the cascade silently overrides it.

You don’t need to memorize the rules.
You just need to know that CSS is always asking:

“Which instruction should I listen to?”

When you understand that question,
you can guide AI to write rules that actually take effect
.

CSS stands for Cascade style Sheets.
Why “Cascade”?

In CSS, styles cascade→ down from multiple sources, like water from a waterfall, combining and overriding each other based on priority, specificity, and order. The algorithm determines the winning style by evaluating origin, importance, and finally, the source.
The “Waterfall” Analogy:
Styles flow from the top of a document to the bottom. Rules defined later in the CSS file (further down the waterfall) typically take precedence over earlier ones. With some exceptions.
When multiple rules conflict (e.g., two different colors for the same element), the cascade acts as the referee based on rules, some of which we will cover next.



Tony de Araujo —New York | Lisbon


foundations/how_css_thinks.txt · Last modified: by editor