CSS is evolving.We’re exploring what comes next.

CSS has grown far beyond describing colors and layouts. It can calculate, respond to context, and express increasingly complex relationships.

Reactive CSS explores what happens when state and interactions become part of that declarative language.

02The evolution

CalculateRelateDecideReact?

Each step moved a little more logic out of scripts and into style. The order is conceptual, not a release history. Try each one.

native CSSReactive CSS · library, not a standard

i · calculatenative
calc()clamp()
padding: clamp(16px, 4vw, 40px)
= 28.8px at 720px
Math moved into the stylesheet. A size that once needed a resize listener became one declaration.
ii · relatenative
:has()@container
.card:has(img) → no match→ matches
Card contains an image
Selectors began to read context: what an element contains and how much room it has.
iii · decidenative · newer
if()@function
padding: if(
style(--size: large): 32px;
else: 16px)
= 16px32px
--size--size: small--size: large
Values gained branches and authors can define functions. Support for these is still arriving.
iv · react?Reactive CSS
state():on()
```
.counter { --count: state(0); }
.counter button:on(click) { --count: increment(1); }
.counter output { content: var(--count); }
```
runs the Reactive CSS runtime
The open question: values that change and events that change them, written where the styles already are.

The first three are part of CSS. The fourth is not. It is syntax from an independent library, read by a small JavaScript runtime, and it is not part of any specification or browser roadmap.

03Native first

If the browser already does it well, use the browser.

1Native first.Reactive CSS does not replace selectors, calculations, form controls, animations or browser APIs. Where they already work, they are the answer.
2Explore what’s missing.State, events and small interactions still usually need JavaScript glue. That gap is the part worth experimenting with.
3Make it usable today.No compiler and no framework. A stylesheet and a small runtime that works in ordinary browsers, without waiting for new standards.

04The experiment

The interaction doesn’t disappear. The imperative glue does.

article.cssReactive CSS

.article {

state --saved: state(false);

}

event.article .save:on(click) {

event --saved: toggle();

}

.article .save {

result --attr-aria-pressed: when(--saved);

}

result.article:when(--saved) .save {

background: #1c1917;

color: #fff;

}

result.save::after { content: when(--saved, "Saved", "Save"); }

result.note::after { content: when(--saved, "In your reading list", "Read it later"); }

Resultreal runtime

JavaScript is still involved. The runtime reads this stylesheet, attaches the click listener, stores --saved and applies the matching rules. What you no longer write is the code that connects them. More in Examples →

05The direction

An experiment, not a standard.

Reactive CSS is a practical way to test declarative interactions in today’s browsers. It does not predict what CSS will become, and it is not a proposal. Its value is in the questions it lets us answer with working code.

How much local interface behavior can be expressed declaratively?
Where does native CSS already provide the better solution?
Which interactions still need JavaScript?
What would make a declarative approach genuinely easier to understand?

Explore the experiment.

Explore Examples Read the Documentation View source on GitHub