Document Structure

These are typical patterns of the top-level document structure.

$body-or-wrapper

scss

$body-or-wrapper: ":where(body, body > div:only-child)";

The body or an inevitable wrapper div.

scss

#{$body-or-wrapper} > :is(header, footer) {
  padding-block: svar(spacing-block-lg);
}

The document’s main header and footer. (There could be more than one of each. But that would not make much sense.)

scss

#{$body-or-wrapper} {
  min-block-size: 100vh;

  > footer {
    position: sticky;
    inset-block-start: 100vh;
  }
}