CSS Hooks
Documentation
Source on GitHub

Do the impossible
with inline styles.

Hooks add CSS features to native
inline styles,
with no build steps
and minimal runtime.

Docs

Pseudo-classes

<button
  style={pipe(
    {
      background: "oklch(45.76% 0.18 258)",
      color: "oklch(100% 0.01 260)",
    },
    on("&:hover", {
      background: "oklch(56.45% 0.18 258)",
    }),
    on("&:active", {
      background: "oklch(56.45% 0.19 20)",
    })
  })}
>
  Save changes
</button>

Selectors

<label>
  <input type="checkbox" checked />
  <span
    style={pipe(
      {},
      on(":checked + &", {
        textDecoration: "line-through"
      })
    )}
  >
    Simplify CSS architecture
  </span>
</label>

Responsive design

<span
  style={pipe(
    {},
    on(or("@container (width < 50px)", "@container (width >= 100px)"), {
      display: "none"
    })
  )}
>
  sm
</span>
<span
  style={pipe(
    {},
    on("@container (width < 100px)", {
      display: "none"
    })
  )}
>
  lg
</span>
smlg

Benefits

Inline styles made practical

Hooks take the simplest styling approach to the next level, removing limitations to make it a viable solution for real-world use cases.

Intuitive state-driven styling

Effortlessly define styles for states like hover, focus, and active. Create engaging UIs without the complexity of external CSS.

Reusable knowledge

Hooks enhance the way you already write inline styles, rather than forcing you to learn non-standard utility class syntax.

Predictable performance

Hooks are pure, don't depend on style injection, and avoid shipping large volumes of irrelevant, render-blocking CSS.

Extreme maintainability

Inline styles tightly integrate with markup, promoting local reasoning and allowing you to change components quickly and easily.

Server-side reliability

Directly embedded within HTML markup without side effects, hooks make server-side rendering simple and reliable. It just works.

Frameworks

Designed forReact

Designed forPreact

Designed forSolid

Designed forQwik

Opinions

Mark Dalgleish
Mark Dalgleish
@markdalgleish

Check out CSS Hooks. This is *very* cool.

It lets you write type-safe inline styles (literally the `style`attribute *BUT* with support for a custom set of pseudo-classes, selectors, media/container queries — and nested too!

Ryan Florence
Ryan Florence
@ryanflorence

That's how I always wished the style prop worked!

Mykhaylo
Mykhaylo
@mryechkin

I absolutely love it. There's just something "fresh" about it. Simple to get started, practically no overhead, and it just makes sense. Best part is that it does this all using native CSS features, nothing fancy - just really cleverly done.

Nicolas
Nicolas
@nicolas_dev_

Looks exactly like what I always wanted the style property to be

Will be trying it out for sure!

Julien Delort
Julien Delort
@Julien_Delort

I was _hooked_ at "no build step"!

Benton Boychuk-Chorney
Benton Boychuk-Chorney
@b_e_n_t_e_n_

I'm curious if there is a "catch" to css hooks, because from first glance it seems too good to be true!