Landmark regions

It can be tempting to style landmark regions directly, but I prefer to create classes (or use descendant selectors) to style them.

• <nav>
• <header>
• <footer>
• <article>
• <section>
• <aside>

This is because they can be used in many different ways.

For example, you might have a <header> used for the top area of your page with your navigation in it, and then others inside of <article> elements.

It's also somewhat common to have multiple <nav> on a page which can be different from one another.

And so I try don't include these in my base styles. I see these more as components that general styles, so we'll get to them later on.

• .site-header
• .site-footer
• .primary-navigation
• .section

For the most part, I don't want to start styling those yet.

Remember, we're trying to think big picture as much as possible now, and slowly narrow down, so for now we want to stay broad.

Sections are a bit different, in that we often have a "general" one, which is what I use my .section for.

We'll come back to styling some of those other ones later, but the sections are a good place to start as we can create a class for them now, and apply to each of our sections to give us some breathing room.

@layer layout {
  .section {
    padding-block: 3.75rem;

    @media (min-width: 760px) {
      padding-block: 8rem;

      &[data-padding="compact"] {
        padding-block: 4.5rem;
      }
    }
  }
}