Manuel MatuzovićIs there a good reason why we're defining global custom properties on :root/html and not on body?
Stu Robson@matuzo from memory when I saw this pop up a while back, essentially –
someone wrote it like that in the spec and here we are.
@sturobson I know that root {} is different depending on the context. In a document its <html>, inside an svg it's <svg>. It makes sense to just use :root everywhere for consistency. I was just wondering if there's a good reason against using body instead.
@matuzo I don't think there is?
@sturobson kkthxbye, :root
@matuzo all roads lead to :root
Tane Piper ⁂@sturobson @matuzo But is it top root? I thought it was encapsulated?
So if I create a component with :root it doesn't leak to parent :root? Or did I miss something?
Ian Tindale@matuzo @sturobson maybe it’s sort of ‘window’ as in the thing that contains the html or svg or plain-text or other
Lippe@matuzo I am defining them mostly on :root because I use some of them on html already. Plus for me it's out of sight and not polluting the rest of the CSS. But I have only tinkered with custom properties on my personal page, so I'm happy to hear other thoughts...
Matthew Hallonbacka@matuzo I've assumed it's to do with inheritance. My usual approach is to define them on :root, then they can be safely overridden in body.
@mallonbacka Interesting! Can you give me an example where you define a prop on :root and override it on body?
@matuzo Color scheme override? Base color on root, overrides are attached to body[data-color-scheme="dark”] or whatever.
It's not essential to do this way, but it is certainly easier to keep track of mentally when the default is only defined on a parent element.
It's not essential to do this way, but it is certainly easier to keep track of mentally when the default is only defined on a parent element.
Tom Anypuppies@matuzo because as we were told 'html and css is enough' ?
😏🤓
😏🤓
Ana Tudor 🐯@matuzo Afaik, no.
Jen Kramer@matuzo Specificity? Pseudoclass beats HTML element, and in a world of class-itis, perhaps this helps some.
Krijn Hoetmer@matuzo So they’re inherited by ::backdrop as well. Oh, wait.
Bramus@KrijnHoetmer @matuzo If I'm not mistaken, Tab is rewriting that part 😉
Adam Argyle@matuzo cuz we think it's the top most node that will reach to all items in the page... but nope
i put mine on html instead of :root so they're easy to overwrite
there's been CSSWG chatter about a new location that would be true root and would be available to all elements AND pseudo elements. but it's not complete.
@argyleink that would also include ::backdrop, right?
@matuzo it would yep
Mia (web luddite)@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?
@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.
@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.
CSS by T. Afif 
@matuzo You will be surprised but many people thing they should be defined inside :root . They think it won't work otherwise.
like @sturobson said, one person did it on root and everyone is following thinking its how it works.
I almost never define them inside root
Egor Kloos@matuzo `:root` overrides `html` so using `html` might be preferable in some cases. My reason is a bit silly. As I work a lot with Shadow DOM I put most of my base custom properties on either `:root` or `:host`. I like the symmetry.
@matuzo in case ya havent seen https://github.com/w3c/csswg-drafts/issues/6641
