Gebruik componentgebonden CSS om te bepalen op welke elementen een regel van toepassing is, en een gedeelde stylesheet om regels op meerdere pagina’s te hergebruiken. Voor een klein HTML-project op je Mac kun je beide combineren; kies de bestandsindeling op basis van wat je wilt verplaatsen en onderhouden.

In deze gids doorlopen we het opmaken van een lokale pagina met een afgeronde vierkante kaart en een aparte notitie. De bedoeling is om het uiterlijk van de kaart voorspelbaar te houden en daarna te bepalen of de CSS in de pagina zelf hoort of in een herbruikbaar bestand. De labels en vorm zijn fictief; voor dit voorbeeld heb je geen framework of gedownloade bestanden nodig.

Waar kies je eigenlijk tussen?

Er zijn twee keuzes: waar de CSS staat en welke elementen deze selecteert. Een ingesloten stylesheet staat in het element style van een HTML-document. Een externe stylesheet is een aparte resource die wordt gekoppeld met link, met rel="stylesheet" en een pad naar href. Dit zijn de HTML-mechanismen om CSS aan te leveren; geen van beide indelingen geeft gewone selectors automatisch een componentgrens. HTML Standard: Het style-element, MDN: Element voor koppeling van externe resources.

De native CSS-regel @scope voegt een selectiegrens toe. Je geeft een rootelement op en schrijft vervolgens regels die binnen die deelboom gelden. Zo blijven korte selectors bruikbaar wanneer het omringende document vergelijkbare elementen bevat. De documentatie van Chrome maakt ook onderscheid tussen native scoping en tools die selectors herschrijven met gegenereerde klassen of attributen. Zulke tools zijn een extra vereiste wanneer een componentvoorbeeld daarvan afhankelijk is. Beperk het bereik van je selectors met de CSS-regel @scope.

Gebruik voor deze taak de volgende keuzehulp. Dit is een redactionele aanbeveling op basis van de gedocumenteerde mechanismen, geen browservereiste.

Je directe taak Voorgestelde indeling Wat moet je meenemen?
Eén kleine pagina als één bestand behouden CSS insluiten in een element style De HTML en eventuele apart verwezen bestanden
Dezelfde kaart op meerdere pagina’s onderhouden Een externe stylesheet met specifieke componentklassen gebruiken Elke HTML-pagina en de gedeelde CSS
Kortere selectors binnen een afgebakende deelboom gebruiken Regels met een expliciete @scope-root toevoegen, ingesloten of extern CSS en markup met de bijbehorende root
Browsers ondersteunen waarvan de scoping-ondersteuning onzeker is Essentiële opmaak in gewone klassenregels houden HTML en het stylesheetbestand met die regels

“Draagbaar” moet dus concreet worden opgevat. Eén HTML-bestand is handig om op zichzelf te verplaatsen. Een map met HTML en CSS kan ook draagbaar zijn, zolang de paden blijven kloppen. Een herbruikbare component vereist nog een derde vorm van draagbaarheid: de bestemming moet de markup-hooks behouden die de selectors verwachten.

Maak een werkend voorbeeld met twee bestanden op je Mac

Maak een map met de naam form-study. Sla daarin twee plattetekstbestanden op met de namen index.html en shared.css. Als je TextEdit gebruikt, kies je Archief > Nieuw en daarna Opmaak > Maak platte tekst voordat je code plakt. Voor het HTML-bestand beschrijft Apple hoe je het met de extensie .html opslaat en bij de vraag Gebruik .html kiest. Controleer of de daadwerkelijke bestandsnaam van de stylesheet shared.css is, zonder toegevoegde extensie .txt. Werken met HTML-documenten in TextEdit op de Mac.

Sla dit volledige HTML-document op als index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Sla deze volledige stylesheet op als shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Open index.html in Safari of een andere desktopbrowser. Het verwachte resultaat is een witte kaart met een rand en een blauwe afgeronde vierkantvorm, gevolgd door een notitie zonder rand. De koppeling met het stylesheet volgt het door MDN gedocumenteerde patroon: de HTML verwijst via href op een stylesheetlink naar de CSS-resource. MDN: Een stylesheet opnemen.

In dit voorbeeld heeft de titel van de kaart bewust een eigen klasse. Zo is de bedoelde stijlrelatie zichtbaar zonder native scoping. De achtergrond en het lettertype van de pagina zijn standaardinstellingen voor het document; de rand van de kaart, de kleur van de titel en de vorm horen bij de kaart. Houd dat onderscheid aan wanneer je regels geschikt maakt voor hergebruik: een andere pagina wil misschien de kaart gebruiken zonder de achtergrond of breedte van deze pagina over te nemen.

Maak voor het delen van de vormgeving een tweede HTML-pagina in dezelfde map en gebruik dezelfde stylesheetlink. Beide pagina’s verwijzen dan naar één CSS-bestand. Behandel wijzigingen in dat bestand als wijzigingen voor elke pagina die ernaar verwijst; controleer elke pagina nadat je een gedeelde regel hebt aangepast.

Wanneer is native gescopeerde CSS nuttig?

Gebruik @scope wanneer een component meerdere elementen bevat die baat hebben bij eenvoudige lokale selectors, vooral als je een expliciete ondergrens rond geneste inhoud nodig hebt. De specificatie CSS Cascading and Inheritance definieert een scope aan de hand van een root en optionele begrenzingselementen. De root is inbegrepen; de begrenzingselementen en hun afstammelingen worden uitgesloten van overeenkomsten met de gescopeerde regels. Deze specificatie is een Working Draft. CSS Cascading and Inheritance Level 6: Styles scopen.

Voor een klein experiment voeg je het volgende optionele fragment toe aan shared.css. Het gebruikt de bestaande voorbeeldmarkup en verandert de vormgeving van de alinea in de kaart:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

In een browser die dit ondersteunt, krijgt de alinea in de kaart een lichte achtergrond en opvulling. De alinea in de notitie valt buiten de scope van die regel. De CSS blijft in het gedeelde bestand staan: scoping en delen kunnen samengaan.

Als je later een geneste regio met de klasse nested-sample toevoegt, kun je dat optionele fragment vervangen door het volgende. Dit is een voorbeeld van een grens; de oorspronkelijke pagina bevat nog geen dergelijke geneste regio.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

De begrenzing sluit de geneste regio uit van overeenkomsten met deze selectors. Dit zorgt niet voor volledige stijlisolatie: geërfde eigenschappen zoals color en font-family kunnen nog steeds voorbij een scopebegrenzing worden doorgegeven. Houd dat onderscheid in gedachten wanneer een genest element nog op zijn ouder lijkt. MDN: Beschrijving van @scope.

Een expliciete root zoals .shape-card maakt ook duidelijk van welke markup de CSS afhankelijk is wanneer je deze tussen bestanden verplaatst. Het doeldocument moet een element met die klasse bevatten. Alleen de stylesheet verplaatsen kan de benodigde markup niet toevoegen.

Wat zijn de beperkingen qua browserondersteuning?

MDN markeert @scope momenteel als Baseline 2026, sinds maart 2026 beschikbaar in de nieuwste versies van alle grote browsers. Oudere browsers ondersteunen het mogelijk niet. Dat je een Mac op je bureau hebt, zegt niet welke CSS-functies de geïnstalleerde browser ondersteunt; controleer de compatibiliteitsinformatie voor de versies die je wilt gebruiken. MDN: Browsercompatibiliteit van @scope.

Houd essentiële kaartopmaak in de gewone klassenregels hierboven als ondersteuning voor oudere browsers belangrijk is. De optionele gescopeerde opmaak voor de alinea kan dan een verbetering blijven. Dankzij de foutafhandeling van CSS kunnen browsers niet-ondersteunde inhoud negeren en geldige CSS blijven verwerken. De aanwezigheid van een stylesheet betekent dus niet dat elke regel erin is toegepast. MDN: Foutafhandeling van CSS.

Voor dezelfde opmaak van de alinea zonder @scope geef je de alinea in de kaart een specifieke klasse, zoals shape-card__caption, en richt je een gewone regel op die klasse. Dat voegt een markup-hook toe, maar voor het resultaat ben je dan niet afhankelijk van native scoping.

Voeg geen attribuut scoped toe aan een element style in de verwachting dat het hetzelfde gedrag oplevert. De attributenlijst voor dat element in de huidige HTML Standard bevat het niet. Native CSS-scoping gebruikt de regel @scope. HTML Standard: Het style-element, MDN: Syntaxis van @scope.

Hoe houd je de pagina draagbaar?

Als je voor dit voorbeeld de volledige map form-study verplaatst, blijft de relatie tussen index.html en shared.css behouden. Als je alleen de HTML verplaatst, blijft de stylesheet achter. Gebruik deze eenvoudige afhankelijkheidsafspraak voordat je een zelfgemaakte pagina overdraagt of opnieuw indeelt:

  1. Markup: Behoud de componentklassen en alle structuur die de selectors nodig hebben.
  2. Stylesheet: Voeg het CSS-bestand toe en laat de HTML-link naar de juiste locatie verwijzen.
  3. Resources: Voeg bestanden toe waarnaar de CSS verwijst en behoud of pas hun paden aan.
  4. Browser: Zorg voor een ondersteund opmaakpad voor de browserversies waarin de pagina wordt geopend.

De derde controle wordt belangrijk wanneer een component lettertypen of decoratieve bestanden krijgt. MDN documenteert dat relatieve URL’s in CSS worden opgelost ten opzichte van de URL van de stylesheet. Als je declaraties naar een stylesheet in een andere map verplaatst, kan de locatie van de resource waarnaar ze verwijzen daarom veranderen. MDN: De CSS-functie url().

Als een externe stylesheet bijvoorbeeld vanuit de projectmap naar een submap styles wordt verplaatst, verwijst een declaratie naar url("assets/tile.png") nu naar styles/assets. Pas het pad aan of behoud de bijbehorende mapstructuur. Het werkende voorbeeld vermijdt die afhankelijkheid doordat de vorm volledig met CSS wordt getekend.

Als het belangrijkste is om één bestand over te dragen, sluit je de meegeleverde CSS in een element style in het element head van het document in en verwijder je de stylesheetlink. Voor het huidige voorbeeld is dan alleen het HTML-bestand nodig. Behoud dezelfde selectors, inclusief een eventuele optionele @scope-regel met expliciete root. HTML ondersteunt het insluiten van een stylesheet via het element style. HTML Standard: Het style-element.

Controleer je keuze met een test voor verplaatsen en opnieuw laden

Maak een kopie van de volledige projectmap op een andere locatie en open daarna de gekopieerde HTML in je browser. Wijzig in die kopie de achtergrondkleur van de vorm in shared.css, sla het bestand op en laad de pagina opnieuw. De zichtbare verandering bevestigt dat je de stylesheet hebt bewerkt die door de gekopieerde pagina wordt gebruikt.

Controleer vervolgens zowel de kaart als de notitie. Bij een geslaagd resultaat behoudt de kaart zijn opmaak en blijft de notitie buiten de optionele gescopeerde regel voor de alinea. Als de hele pagina zijn opmaak verliest, controleer dan eerst de bestandsnaam van de CSS en het linkpad. Ontbreekt alleen de optionele opmaak, controleer dan de browserondersteuning en de scope-root. Verandert een niet-gerelateerd element, controleer dan of selectors verder reiken dan de bedoelde component.

Gebruik bij het opnieuw openen van de HTML in TextEdit Archief > Open, vervolgens Toon opties en Negeer RTF-opdrachten als je de broncode wilt zien. Apple documenteert ook de instelling Toon HTML-bestanden als HTML-code in plaats van opgemaakte tekst voor toekomstige openingen. Werken met HTML-documenten in TextEdit op de Mac.

Kies voor ingesloten CSS wanneer het vooral belangrijk is om deze kleine pagina bij elkaar te houden. Kies een gedeelde stylesheet wanneer meerdere pagina’s dezelfde onderhouden regels moeten gebruiken. Voeg native scoping toe wanneer de grenzen die regels vereenvoudigen en de browser het ondersteunt. Verplaats en open tot slot de daadwerkelijke bestanden opnieuw: zo controleer je de relaties tussen markup, stylesheet en resources waarvan je gekozen indeling afhankelijk is.

Bronnen