Manuel MatuzovićApr 19, 2023
Is there a good reason why we're defining global custom properties on :root/html and not on body?
Show threadMia (web luddite)Apr 19, 2023

@matuzo A few reasons I can think of:

- Only the root element updates root units (rem). If that root font size relies on a design token, it's needed on html.
- If properties (eg direction, writing-mode, background, overflow) need to propagate to the viewport, they should be set on html instead of body.
- If html is a container, it can be queried by the body.

Those may only require a small subset of custom props, but once you start… are there any reasons not to use the root element?

Show threadManuel Matuzović

@mia cool, thanks. I need some time to digest that. :)

I mean, I don't really have reason not to use it, but if I want to do something like in this CodePen it feels strange to change the variables I've originally defined on :root, on body.

https://codepen.io/matuzo/pen/poxEqeG

poxEqeG

...

CodePen
Apr 19, 2023 at 3:59pmWeb
Show threadMia (web luddite)Apr 19, 2023
@matuzo Yeah, the parent/child requirement of container queries creates a few of those scenarios - but in my mind that makes the html/body combo particularly helpful, one as a container for the other.