Use the -root {} CSS pseudo-class
The :root
CSS pseudo-class matches the root element of a tree
representing the document. In HTML, :root
represents the <html>
element and is identical to the selector html {}
, except that :root
’s
specificity is higher. It’s a good, layout-free place to stash CSS variables.