Re: [csswg-drafts] [css-values-4] inherit() function: like var() for parent value, for any property (#2864)

Just wanted to drop-in the case that I remembered that I had where I'd really want to have `inherit()`.

Let's say we have a typographic component that applies margin to its children via an owl selector (I know that this potentially could be done with `gap`, but there are uses for this outside of the `gap` as well, like when we want to adjust the margin between specific items etc.):

```CSS
.has-gap > * + * {
    margin-top: 1em;
}
```

If we don't have a variable, then things are always ok. But if we'd use a variable:

```CSS
.has-gap {
    --gap: 1em;
}
.has-gap > * + * {
    margin-top: var(--gap);
}
```

Then things would work ok _unless_ we'd nest the same component inside itself, and would try to override the gap on it for its children:

```HTML
<div class="has-gap">
    …
   <div class="has-gap" style="--gap: 0.5em">…</div>
    …
</div>
```

Instead of just setting the gap for the children of the inner component this would also override the margin on the component itself. With `inherit()` and an extra CSS variable we could do something like this:

```CSS
.has-gap {
    --gap: 1em;
}
.has-gap > * + * {
    --self-gap: inherit(--gap);
    margin-top: var(--self-gap);
}
```

This would make it so overriding the `--gap` on the child won't affect what the parent tries to apply — but also provides a way for the child to explicitly override this value by setting the `--self-gap`.

I remember I wanted to apply this pattern for some other places — basically, anywhere I want for a component to apply some value that we get from a potentially overridable CSS variable to its children, I'd always want to use `inherit()`.

-- 
GitHub Notification of comment by kizu
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2864#issuecomment-1211724786 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 11 August 2022 09:03:05 UTC