2024-11-14

A perfect use case for @scope

So many ugly hacks... gone!

The problem

Below is a simplification of what an article page on this website could look like. .rich-text provides very nice rich text styles for blog and docs articles.

article.html

<article class="rich-text">
  <h1>Title</h1>
  <p>Paragraph</p>

  <div class="code-example-component">
    <!--  -->
  </div>
</article>

The problem anyone runs into when approaching a page structure like this is that the .rich-text styles sneak into your preciously styled components that you don't want polluted with other styles. When coding vanilla CSS we're completely at the mercy of the cascade™️, so we need to be mindful of what styles flow where.

But what if we could tell CSS to just... look the other way and not care about our custom, precious components? 🤷

Enter @scope

Developers have been quite confused by @scope ever since it was announced believing CSS finally solved style scoping, but no that's not it. Basically @scope is primarily about defining a boundary for where your styles should apply, and depending on how creative you get with the selectors you can do some pretty cool stuff. If that meant absolutely nothing to you, don't worry - you will get the hang of it soon. Keep reading.

TIP

Read through the MDN docs for more comprehensive info. It's actually quite good.

If we introduce a second class, let's call it .not-rich-text, we can use @scope to create a little fence around the elements we want to protect.

article.html

<article class="rich-text">
  <h1>Title</h1>
  <p>Paragraph</p>

  <div class="code-example-component not-rich-text">
    <!--  -->
  </div>
</article>

The only change to our fairly large chunk of rich text styles is wrapping it like this:

typography.css

@scope (.rich-text) to (.not-rich-text) {
  :scope {
    /* rich text styles */
  }
}

Wait a minute! What's :scope?

Easy! The :scope pseudo-class represents the scope's root. In this case it's .rich-text

End result

Notice how the text styles are different from the ones in the article around the code example component! There are no margins on the any of them, for instance. Our little style fence works!

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Large

Body

Overline

Caption

<article class="rich-text">
  <!-- this article -->

  <div class="code-example-component not-rich-text">
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p class="large">Body Large</p>
    <p>Body</p>
    <p class="overline">Overline</p>
    <caption>
      Caption
    </caption>
  </div>
</article>

Ta-daa! 👏