Stylizowanie lokalne i unikanie konfliktów – @scope

Stylizowanie lokalne i unikanie konfliktów – @scope

@scope to nowa, eksperymentalna funkcja w CSS, która pozwala ograniczyć działanie reguł tylko do konkretnego fragmentu dokumentu HTML. Dzięki niej możesz stylować komponenty lokalnie – tak jak w Shadow DOM lub bibliotekach komponentowych – ale używając czystego CSS, bez frameworków.

To przełom, jeśli chodzi o izolację stylów. Styl napisany dla jednego komponentu nie wpływa na inne części strony, nawet jeśli mają te same selektory (np. h2, button, itd.).

1. Jak działa @scope?

Reguła @scope definiuje zakres, w którym styl ma obowiązywać. Zakres ten określasz przez tzw. „root selector” (element, od którego zaczynamy) i opcjonalnie – „scoped” (czyli właściwy kontekst wewnętrzny).

@scope (.component) {
  h2 {
    font-size: 2rem;
    color: #0d6efd;
  }

  button {
    padding: 1rem 2rem;
    border-radius: 8px;
  }
}

W tym przypadku style obowiązują tylko wewnątrz elementu z klasą .component. Jeśli gdziekolwiek indziej wystąpi h2 lub button – nie będą objęte tymi regułami.

2. Przykład HTML + scoped CSS

<section class="component">
  <h2>Tytuł lokalny</h2>
  <button>Kliknij mnie</button>
</section>

<h2>Tytuł globalny</h2>

Efekt: pierwszy h2 i button są stylowane lokalnie, drugi h2 nie jest objęty @scope.

3. Zakres z root i scoped

@scope (.section) to (.section .content) {
  p {
    line-height: 1.6;
  }
}

Ten zapis mówi: „styluj tylko <p> wewnątrz .content, która jest wewnątrz .section”.

4. Zalety @scope

• Styl lokalny – selektory typu h1, p nie „przypadkowo” stylują całą stronę
• Brak potrzeby dodawania skomplikowanych nazw klas (np. BEM)
• Lepsza modularność i odporność na konflikty stylów
• Gotowość do współpracy z komponentowymi bibliotekami i Web Components

5. Wsparcie przeglądarek

Na moment tworzenia kursu (2025), @scope działa w najnowszych wersjach przeglądarek Chromium (np. Chrome 121+) i Firefoksie, ale jeszcze nie jest obsługiwany przez Safari. Dlatego warto traktować go jako narzędzie do nowych projektów lub tam, gdzie masz kontrolę nad środowiskiem (np. dashboard, SPA, aplikacje webowe).

Dobre praktyki

• Używaj @scope do stylowania komponentów – np. kart, modali, sekcji ofert
• Nie nadużywaj globalnych klas – tam gdzie można, zamknij wszystko w @scope
• Łącz @scope z @layer – to duet przyszłości

Ćwiczenie

Stwórz komponent .testimonial, który zawiera nagłówek i paragraf:

• Styluj je lokalnie za pomocą @scope
• Zadbaj, aby styl nie wpłynął na inne h2 i p na stronie
• Dodaj kolor nagłówka i większe odstępy między akapitami

Wniosek

@scope to przyszłość CSS – pozwala na lokalne, kontrolowane stylowanie komponentów. Dzięki niemu możesz pisać prostszy kod, bez obawy o globalne kolizje. To sposób na to, by CSS wreszcie był naprawdę „modularny” – tak jak JavaScript czy HTML Web Components.