What is the point to define global CSS custom properties in a :root instead of body or html tags. Is this will lead to different effects or perfomance issues?
CSS custom properties placement :root vs body/html tags
Viewed 974
2 Answers
Well, it might be weird in the first place, but it is nothing about it except specificity. :root is actually html itself with a higher specificity, so the main reason for putting variables in :root element is because we are not only using them in CSS but we are using them in SVG and XML also. So we may call :root global scope as its usage. You can also read more about their actual difference here.
It lets you to define various variables and use them if needed. _root stands for html element - have you ever attached style for hrml tag? Performance - wouldn't bother...
Related