[css] globalny zasięg zmiennych css - gdzie najlepiej umieścić deklarację?

Question

W którym "miejscu" umieścić poprawnie deklarację zmiennych css, aby uzyskać ich globalny zasięg.

Przeszukując internet, od kilkunastu godzin, najczęściej spotykałem taki zapis:

  :root {
    --background: black;
    --color: white;
  }

Taki zapis jest zalecany przez MDN Web Docs: Using CSS custom properties (variables).

Też spotkałem się z takim zapisem:

html {
  --background: black;
  --color: white;
}

lub

body {
  --background: black;
  --color: white;
}

 

Answer 1

Pseudoklasa :root oznacza główny węzeł w drzewie DOM i w przypadku dokumentu HTML jest równoznaczna z selektorem znacznika html, tylko ma wyższą specyficzność: https://developer.mozilla.org/en-US/docs/Web/CSS/:root

Znacznik html może nie działać w przypadku innych dokumentów (np. XML, SVG), gdzie podpięty będzie CSS. W takich przypadkach selektor :root powinien zadziałać uniwersalnie.

Znacznik body nie jest już tak "globalny" jak :root czy html, ponieważ jest potomkiem elementu html w drzewie DOM.