Verwende komponentenspezifisches CSS, um festzulegen, auf welche Elemente eine Regel wirkt, und ein gemeinsames Stylesheet, um Regeln auf mehreren Seiten wiederzuverwenden. Bei einem kleinen HTML-Projekt auf deinem Mac kannst du beides kombinieren. Wähle die Dateianordnung danach aus, was du verschieben und pflegen musst.

Diese Anleitung führt durch die Gestaltung einer lokalen Seite mit einer Karte in Form eines abgerundeten Quadrats und einer separaten Notiz. Ziel ist es, das Erscheinungsbild der Karte vorhersehbar zu halten und dann zu entscheiden, ob ihr CSS in die Seite oder in eine wiederverwendbare Datei gehört. Beschriftungen und Form sind synthetisch; für das Beispiel sind weder Framework noch heruntergeladene Ressourcen erforderlich.

Was entscheidest du eigentlich?

Es geht um zwei Entscheidungen: Wo das CSS liegt und welche Elemente es auswählt. Ein eingebettetes Stylesheet liegt im Element style eines HTML-Dokuments. Ein externes Stylesheet ist eine separate Ressource, die mit link eingebunden wird und rel="stylesheet" sowie einen Pfad zu href verwendet. Das sind die Mechanismen von HTML, um CSS bereitzustellen; keine der beiden Anordnungen schafft für gewöhnliche Selektoren automatisch eine Komponentengrenze. HTML-Standard: Das style-Element, MDN: Element für externe Ressourcenverknüpfungen.

Das native CSS-@scope fügt eine Auswahlgrenze hinzu. Du bestimmst ein Wurzelelement und schreibst anschließend Regeln, die innerhalb dieses Teilbaums gelten. So bleiben kurze Selektoren nützlich, wenn das umgebende Dokument ähnliche Elemente enthält. Die Chrome-Dokumentation unterscheidet außerdem natives Scoping von Werkzeugen, die Selektoren mit generierten Klassen oder Attributen umschreiben. Solche Werkzeuge sind eine zusätzliche Voraussetzung, wenn ein Komponentenbeispiel davon abhängt. Die Reichweite deiner Selektoren mit der CSS-At-Regel @scope begrenzen.

Für diese Aufgabe hilft dir die folgende Entscheidungshilfe. Sie ist eine redaktionelle Empfehlung auf Grundlage der dokumentierten Mechanismen und keine Browseranforderung.

Deine unmittelbare Aufgabe Empfohlene Anordnung Was du mitnehmen musst
Eine kleine Seite als einzelne Datei behalten CSS in ein style-Element einbetten HTML sowie alle separat referenzierten Ressourcen
Dieselbe Karte auf mehreren Seiten pflegen Ein externes Stylesheet mit eigenen Komponentenklassen verwenden Jede HTML-Seite und das gemeinsame CSS
Kürzere Selektoren innerhalb eines festgelegten Teilbaums verwenden @scope-Regeln mit expliziter Wurzel hinzufügen, eingebettet oder extern CSS und Markup mit der passenden Wurzel
Browser unterstützen, deren Scoping-Unterstützung ungewiss ist Essenzielle Gestaltung in gewöhnlichen Klassenregeln belassen HTML und das Stylesheet, in dem diese Regeln stehen

„Portabel“ braucht daher eine konkrete Bedeutung. Eine einzelne HTML-Datei lässt sich bequem allein verschieben. Auch ein Ordner mit HTML und CSS kann portabel sein, sofern die Pfade weiterhin stimmen. Eine wiederverwendbare Komponente benötigt eine dritte Form von Portabilität: Am Zielort muss das Markup die Anknüpfungspunkte enthalten, die ihre Selektoren erwarten.

Erstelle auf deinem Mac ein funktionierendes Beispiel mit zwei Dateien

Erstelle einen Ordner namens form-study. Speichere darin zwei reine Textdateien mit den Namen index.html und shared.css. Wenn du TextEdit verwendest, wähle Ablage > Neu und dann Format > In reinen Text umwandeln, bevor du den Code einfügst. Apple beschreibt, wie du die HTML-Datei mit der Erweiterung .html speicherst und bei der Nachfrage Use .html auswählst. Stelle sicher, dass der tatsächliche Dateiname des Stylesheets shared.css lautet und keine zusätzliche .txt-Endung enthält. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten.

Speichere dieses vollständige HTML-Dokument 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>

Speichere dieses vollständige Stylesheet 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;
}

Öffne index.html in Safari oder einem anderen Desktopbrowser. Das erwartete Ergebnis ist eine weiße Karte mit Rahmen und einem blauen, abgerundeten Quadrat, gefolgt von einer Notiz ohne Rahmen. Die Verbindung zum Stylesheet folgt dem von MDN dokumentierten Muster: Das HTML benennt die CSS-Ressource über href in einem Stylesheet-Link. MDN: Ein Stylesheet einbinden.

Im Beispiel hat der Titel der Karte bewusst eine eigene Klasse. Dadurch wird die beabsichtigte Gestaltungsbeziehung sichtbar, ohne dass natives Scoping erforderlich ist. Hintergrund und Schriftart der Seite sind Dokumentstandards; Rahmen, Titelfarbe und Form gehören zur Karte. Behalte diese Unterscheidung im Blick, wenn du wiederverwendbare Regeln herauslöst: Eine Zielseite soll vielleicht die Karte übernehmen, aber nicht den Hintergrund oder die Breite dieser Seite.

Um das Design gemeinsam zu verwenden, erstelle im selben Ordner eine zweite HTML-Seite und verwende denselben Stylesheet-Link. So verweisen beide Seiten auf eine CSS-Datei. Betrachte Änderungen an dieser Datei als Änderungen an jeder verknüpften Seite und prüfe jede Seite, nachdem du eine gemeinsame Regel geändert hast.

Wann hilft natives Scoped CSS?

Verwende @scope, wenn eine Komponente mehrere Elemente enthält, für die einfache lokale Selektoren nützlich sind, insbesondere wenn du um verschachtelte Inhalte eine explizite untere Grenze benötigst. Die CSS-Spezifikation zu Kaskadierung und Vererbung definiert einen Geltungsbereich anhand einer Wurzel und optionaler Begrenzungselemente. Die Wurzel ist eingeschlossen; Begrenzungselemente und ihre Nachfahren sind von den Übereinstimmungen mit den Scoped-Regeln ausgeschlossen. Diese Spezifikation ist ein Working Draft. CSS Cascading and Inheritance Level 6: Styles scopen.

Für ein kleines Experiment kannst du den folgenden optionalen Abschnitt an shared.css anhängen. Er verwendet das vorhandene Beispiel-Markup und ändert das Aussehen des Kartenabsatzes:

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

In einem Browser, der dies unterstützt, erhält der Absatz innerhalb der Karte einen hellen Hintergrund und Innenabstand. Der Notizabsatz liegt außerhalb dieses Geltungsbereichs. Das CSS bleibt in der gemeinsamen Datei: Scoping und gemeinsame Nutzung funktionieren zusammen.

Wenn du später einen verschachtelten Bereich mit der Klasse nested-sample hinzufügst, kannst du diesen optionalen Abschnitt durch den folgenden ersetzen. Er veranschaulicht eine Begrenzung; die ursprüngliche Seite enthält noch keinen solchen verschachtelten Bereich.

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

Die Begrenzung schließt den verschachtelten Bereich von diesen Selektorübereinstimmungen aus. Sie schafft keine vollständige Stilisolierung: Geerbte Eigenschaften wie color und font-family können weiterhin über eine Bereichsbegrenzung hinausgelangen. Behalte diese Unterscheidung im Kopf, wenn ein verschachteltes Element seinem übergeordneten Element weiterhin ähnelt. MDN: Beschreibung von @scope.

Eine explizite Wurzel wie .shape-card macht die Abhängigkeit außerdem klar, wenn das CSS zwischen Dateien verschoben wird. Das Zieldokument muss ein Element mit dieser Klasse enthalten. Das Verschieben des Stylesheets allein stellt das erforderliche Markup nicht bereit.

Welche Einschränkungen gibt es bei der Browserunterstützung?

MDN kennzeichnet @scope derzeit als Baseline 2026, also als seit März 2026 in den neuesten Browserversionen verfügbar. Ältere Browser unterstützen es möglicherweise nicht. Dass ein Mac auf deinem Schreibtisch steht, sagt nichts darüber aus, welche CSS-Funktionen der installierte Browser unterstützt. Prüfe anhand der Kompatibilitätsinformationen die Versionen, die du verwenden willst. MDN: Browserkompatibilität von @scope.

Lass die essenzielle Gestaltung der Karte in den gewöhnlichen Klassenregeln oben, wenn ältere Browser relevant sind. Die optionale Gestaltung des gescopten Absatzes kann dann eine Erweiterung bleiben. Die Fehlerbehandlung von CSS ermöglicht es Browsern, nicht unterstützte Inhalte zu verwerfen und gültiges CSS weiter zu verarbeiten. Dass ein Stylesheet vorhanden ist, bedeutet also nicht, dass jede darin enthaltene Regel wirksam wurde. MDN: CSS-Fehlerbehandlung.

Für dieselbe Absatzgestaltung ohne @scope kannst du dem Kartenabsatz eine eigene Klasse wie shape-card__caption geben und diese Klasse dann in einer gewöhnlichen Regel auswählen. Dafür kommt ein Anknüpfungspunkt im Markup hinzu; das Ergebnis hängt jedoch nicht von nativem Scoping ab.

Füge einem style-Element kein Attribut scoped hinzu, wenn du dasselbe Verhalten erwartest. Die Attributliste für dieses Element im aktuellen HTML-Standard enthält es nicht. Natives CSS-Scoping verwendet die @scope-Regel. HTML-Standard: Das style-Element, MDN: @scope-Syntax.

Wie hältst du die Seite portabel?

Für dieses Beispiel bleibt beim Verschieben des vollständigen Ordners form-study die Beziehung zwischen index.html und shared.css erhalten. Wenn du nur das HTML verschiebst, bleibt das Stylesheet zurück. Verwende diese einfache Abhängigkeitsvereinbarung, bevor du eine erstellte Seite weitergibst oder neu ordnest:

  1. Markup: Bewahre die Komponentenklassen und alle Strukturen, die von den Selektoren benötigt werden.
  2. Stylesheet: Füge die CSS-Datei hinzu und lasse den HTML-Link auf ihren Speicherort verweisen.
  3. Ressourcen: Füge alle vom CSS referenzierten Dateien hinzu und bewahre ihre Pfade oder aktualisiere sie.
  4. Browser: Stelle für die Browserversionen, in denen die Seite geöffnet wird, einen unterstützten Styling-Pfad sicher.

Die dritte Prüfung wird wichtig, wenn eine Komponente um Schriftarten oder dekorative Dateien ergänzt wird. Laut MDN werden relative CSS-URLs relativ zur URL des Stylesheets aufgelöst. Wenn Deklarationen in ein Stylesheet in einem anderen Ordner verschoben werden, kann sich daher der Speicherort der referenzierten Ressource ändern. MDN: CSS-Funktion url().

Wenn du beispielsweise ein externes Stylesheet aus dem Projektordner in einen Unterordner styles verschiebst, verweist eine direkte Deklaration mit url("assets/tile.png") jetzt auf styles/assets. Aktualisiere den Pfad oder bewahre die entsprechende Verzeichnisstruktur. Das funktionierende Beispiel vermeidet diese Abhängigkeit, indem es seine Form vollständig mit CSS zeichnet.

Wenn dir die Übergabe als einzelne Datei am wichtigsten ist, bette das bereitgestellte CSS in ein style-Element innerhalb des head des Dokuments ein und entferne den Stylesheet-Link. Für das aktuelle Beispiel reicht dann die HTML-Datei. Behalte dieselben Selektoren bei, einschließlich eines optionalen @scope-Blocks mit expliziter Wurzel. HTML unterstützt das Einbetten eines Stylesheets über das Element style. HTML-Standard: Das style-Element.

Prüfe deine Entscheidung durch Verschieben und erneutes Laden

Erstelle an einem anderen Speicherort eine Kopie des vollständigen Projektordners und öffne das kopierte HTML in deinem Browser. Ändere in dieser Kopie die Hintergrundfarbe der Form in shared.css, speichere die Datei und lade die Seite neu. Die sichtbare Änderung bestätigt, dass du das Stylesheet bearbeitet hast, das von der kopierten Seite verwendet wird.

Prüfe anschließend sowohl die Karte als auch die Notiz. Bei einem erfolgreichen Ergebnis bleibt die Gestaltung der Karte erhalten, während die Notiz außerhalb der optionalen Scoped-Regel für Absätze bleibt. Verliert die gesamte Seite ihre Gestaltung, prüfe zuerst den CSS-Dateinamen und den Linkpfad. Fehlt nur die optionale Gestaltung, prüfe die Browserunterstützung und die Scope-Wurzel. Ändert sich ein nicht zugehöriges Element, untersuche Selektoren, die über die vorgesehene Komponente hinauswirken.

Wenn du das HTML erneut in TextEdit öffnest, wähle Ablage > Öffnen, dann Optionen einblenden und Rich-Text-Befehle ignorieren, falls du den Quelltext sehen möchtest. Apple beschreibt außerdem die Einstellung HTML-Dateien als HTML-Code statt als formatierten Text anzeigen für zukünftiges Öffnen. Mit HTML-Dokumenten in TextEdit auf dem Mac arbeiten.

Wähle eingebettetes CSS, wenn es vor allem darum geht, diese kleine Seite zusammenzuhalten. Wähle ein gemeinsames Stylesheet, wenn mehrere Seiten dieselben gepflegten Regeln verwenden sollen. Ergänze natives Scoping, wenn dessen Grenzen die Regeln vereinfachen und der Browser es unterstützt. Verschiebe und öffne zum Abschluss die tatsächlichen Dateien erneut: So prüfst du die Beziehungen zwischen Markup, Stylesheet und Ressourcen, auf die deine gewählte Anordnung angewiesen ist.

Quellen