Re: [csswg-drafts] [css-variables-2] Custom units as simple variable desugaring (#7379)

Thought I’d mention the specific web components / design systems challenge discussed in [#7613 `hem`: font-relative unit, relative to host element font-size](https://github.com/w3c/csswg-drafts/issues/7613) – this is a clear use case for custom units.

If you want to use font-relative values in a Web Component for a UI element meant to be reusable across many sites,

- `rem` only works when the size of the root element hasn’t been customised unexpectedly (so unreliable in web components).
- `em` works but its compounding nature is too hard to keep track of (particularly when also used for spacing, not just font size).

So – with custom units, I’d introduce either a container-relative `cem` (as proposed in [this comment](https://github.com/w3c/csswg-drafts/issues/7613#issuecomment-1220300079)):

```css
/* In web components scoped styles */
h2 {
    /* font-size: calc(2 * var(--cem)); */
    font-size: 2--cem;
}

/* In parent page styles */
html {
    font-size: 62.5%;
}

my-component {
    --cem: 1.6rem;
}
```

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


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

Received on Tuesday, 7 March 2023 21:58:28 UTC