":root" vs. "*" for variable declaration

[loxy]

Hi!

Why do you use sometime :root for variable declaration and sometimes :root, *?
Does that have a special reason?

Best regards,
Kersten

[sebastiano-guerriero]

Hi!

Yes, we use :root, * if we want a variable to be editable on every element.

In general, if you set a variable in the root:

:root {
  --variable-multiplier: 1;
  --variable: calc(10px + var(--variable-multiplier)); 
}

On a component level, if you do this:

.component {
  --variable-multiplier: 2;
}

--variable won't be 20px, but 10px. However, if you use the :root, * selector, you can edit --variable-multiplier on a component level, and affect --variable on that component.

This technique should be used with caution. You can't declare all the variables using :root, * or your site performance will be affected.

Hope this helps!

[loxy]

Ok, understood. Thank you! I tried it out. The calculation takes the value of the selector level. Was not really aware of that. But it makes sense.

But why not only using the universal selector? So:

:root {
  --variable-multiplier: 1;
}

* {
  --variable: calc(10px + var(--variable-multiplier)); 
}

And your hint is important. I'm not sure how this is implemented at Browsers, but defining variables on EVERY element is probably expensive...

[sebastiano-guerriero]

I think we included :root because the variables weren't targeting the HTML element and we were experiencing some issues when a data-theme was set on the html element. I was a long time ago though. If it was a browser issue, it could have been solved now. I'll check again 👍