📌 What Is @scope?

The @scope rule allows you to limit where certain CSS rules apply by defining a scope root and optional scope boundaries. This makes CSS more modular, predictable, and component-friendly — similar to how scoping works in frameworks like React or Vue. 🎯

🎯 Why Use @scope?

🧩 Basic Syntax

@scope (.card) {
  h2 {
    color: purple;
  }
}

✔ Only <h2> elements inside .card will get the purple color.
✔ h2 outside .card remains unaffected.

📍 Scope Root & Boundaries

A scope rule starts at the root selector and stops at theboundaries (optional).

@scope (.profile) to (.profile-footer) {
  p {
    color: green;
  }
}

✔ Styles apply inside .profile
❌ Styles DO NOT apply inside .profile-footer or deeper

🎨 Real Example

@scope (.card) {
  h2 {
    font-size: 24px;
  }

  .btn {
    background: blue;
    color: white;
  }
}

<div class="card">
  <h2>Title</h2>
  <button class="btn">Click Me</button>
</div>

<h2>Outside Title</h2> <!-- Not affected -->

👉 Only the elements inside .card are styled.

🎯 Scoping Multiple Roots

@scope (.card, .sidebar) {
  h3 {
    color: teal;
  }
}

✔ h3 inside .card or .sidebar will apply
❌ Others remain untouched

🛑 What @scope Does NOT Do

⚔️ Cascade + @scope

h2 {
  color: red; /* global */
}

@scope (.box) {
  h2 {
    color: blue;
  }
}

✔ Inside .box: blue
✔ Outside .box: red

📌 Using :scope Pseudoclass (Not the Same!)

The :scope pseudo-class refers to the element used in query selection. It is NOT related to the @scope at-rule.

:scope > .item {
  background: yellow;
}

✨ Combining @layer + @scope

You can scope styles inside cascade layers for ultra-organized CSS.

@layer components {
  @scope (.card) {
    p {
      font-weight: bold;
    }
  }
}

🧠 Advanced: Scoped Style Overrides

@scope (.theme-dark) {
  @scope (.card) {
    h2 {
      color: white;
    }
  }
}

✔ This applies only when BOTH .theme-dark AND .card are parents.

📝 Best Practices

🔗 Helpful Resources