CSS custom properties placement :root vs body/html tags

Question

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?

Answer 1

Well, it might be weird initially, 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 also in SVG and XML. So we may call :root global scope as its usage. You can also read more about their differences.