Idea to make atomic props responseve

[tobiasschmidt89]

Hi there,

I recently found out that I can do this with custom props:

:root {
  --s4: 1rem;
  --s8: 2rem;
}
@media screen and (min-width: 80ch) { :root {
  --md-s4: var(--s4);
  --md-s8: var(--s8);
  --md-flex: flex;
}}

Usage in css.

.card {
  display: var(--md-flex, grid);
  padding: var(--md-s8, var(---s4));
}

Responsive atomic custom props feel like tailwind, but only one custom prop is needed per value and breakpoint vs. tailwinds property, value and breakpoint combination. Also it still feels like utility classes, but mixes better with using plain old css vs going full in with utility classes.

Usage in inline styles (jsx) also feels good and comparable to tailwind without the need of crazy tooling:

```html
<Card style="padding:var(--md-s8, var(--s4));" />

This basically removes 50% of the reason why we have css-in-js. With some smart choices it is also possible to solve the other 50% of issue: Inline style interactivity. Compared to e.g. space props it is more difficult so to create a set of useful props in a library like open props

a:hover {
  --h-scale: scale(1.15);
}

Usage:

<Card style="transform:var(--h-scale, scale(1));" />

Maybe open props can become a responsive, atomic custom prop library with this.

KR Tobi