Document-level Elements
These are elements unique to each document.
Although official HTML element references categorize body as sectioning element, either one amongst others
or one with its own category, and main as either sectioning or grouping content,
here they are kept together in one category with html.
body
scss
body {
@include coloring.set-colors("body");
@include coloring.use-colors;
}Content root.
html
scss
html {
@media screen and not (prefers-reduced-motion) {
scroll-behavior: smooth;
}
}Document root.
Also selectable as :root (which has a higher specificity).
main
scss
main {
padding-block: svar(spacing-block-lg, svar(spacing-lg));
}The document’s main content.
Unlike html and body there can be multiple main elements in one document.
Nevertheless, there can be only one (visible).