Moderni CSS Scope

Moderni CSS tuo @scope-säännön, joka rajaa tyylit tiettyihin elementteihin. Ratkaisu sopii komponenttipohjaiseen tyylittelyyn ilman build-vaihetta tai CSS-in-JS -runtimea.

@scope määrittelee rajauksen juuren ja valinnaisen ylärajan. Tyylit koskevat vain rajauksen sisällä olevia elementtejä — ihanteellinen komponenttipohjaiseen ajatteluun.

Perusrajaukset

Yksinkertaisin tapaus: rajaa tyylit komponenttiin data-scope-attribuutilla:

<!-- HTML -->
<div data-scope="Card">
  <h1>Title</h1>
  <p>Content here</p>
</div>

/* CSS */
@scope ([data-scope="Card"]) to ([data-scope]) {
  h1 {
    color: var( --primary-600);
  }
  p {
    margin-bottom: 1rem;
  }
}

@scope ([data-scope="Card"]) varmistaa, että tyylit koskevat vain kyseistä komponenttia. to ([data-scope]) asettaa ylärajan ja estää tyylien vuotamisen sisäkkäisiin komponentteihin.

Sisäkkäiset komponentit

Sisäkkäisissä komponenteissa rajaus estää parent-tyylit vaikuttamasta lapsiin:

<!-- HTML -->
<div data-scope="Article">
  <h1>Article Title</h1>
  <div data-scope="Card">
    <h1>Card Title</h1>
    <p>Card content</p>
  </div>
</div>

/* CSS */
@scope ([data-scope="Article"]) to ([data-scope]) {
  h1 {
    color: var( --primary-600);
    font-size: 2rem;
  }
}

@scope ([data-scope="Card"]) to ([data-scope]) {
  h1 {
    color: var(--neutral-700);
    font-size: 1.5rem;
  }
}

Tässä esimerkissä Article-tyylit eivät vaikuta Card-komponenttiin to ([data-scope]) -rajan ansiosta. Jokainen komponentti pitää omat tyylinsä erillään.

Hyödyt

• Ei runtime-kuormaa – Tyylit ovat tavallista CSS:ää, jonka selain parsii
• Ei build-vaihetta – Toimii vanilla HTML/CSS:n kanssa ja minkä tahansa build-työkalun kanssa
• Automaattinen eristys – Rajaus estää tyylien vuotamisen
• Selaimen natiivi – Moderni CSS, jota kaikki nykyselaimet tukevat

Selaintuki

@scope on nyt tuettu kaikissa moderneissa selaimissa. Firefox lisäsi tuen joulukuussa 2025, jolloin tuki täyttyi.

Lopuksi

CSS @scope on tehokas, nollaruntime-ratkaisu komponenttipohjaiseen tyylittelyyn. Saat rajatut tyylit ilman CSS-in-JS-kirjastojen tai build-aikaisten muunnosten monimutkaisuutta.