Styles gezielt auf Elemente begrenzen
CSS-Regeln lokal kapseln und unerwünschte Überschneidungen vermeiden
@scope ist eine moderne CSS-Funktion, mit der du den Gültigkeitsbereich von Styles gezielt auf einen bestimmten DOM-Bereich begrenzen kannst. Damit lassen sich Styles lokal kapseln, ohne dass du dafür komplizierte Selektoren oder zusätzliche BEM-Klassen benötigst.
Grundsyntax
Die Grundsyntax von @scope besteht aus einem Scope-Startpunkt und einem Block, in dem die CSS-Regeln definiert werden. Der Startpunkt legt fest, innerhalb welchen Elements die enthaltenen Selektoren wirken dürfen.
@scope (.card) {
h2 { color: blue; }
p { color: #444; }
}Die Regeln innerhalb von @scope gelten nur für Elemente, die sich innerhalb von .card befinden. Ein h2 oder p außerhalb dieses Bereichs wird von diesen Regeln nicht beeinflusst. Das ist besonders interessant bei wiederverwendbaren Komponenten, bei denen identische Elemente in unterschiedlichen Bereichen vorkommen können.
Scope mit Begrenzung
Du kannst zusätzlich einen unteren Scope definieren:
@scope (.card) to (.footer) {
p { color: #666; }
}Damit gelten die Styles innerhalb von .card, aber nicht mehr innerhalb des festgelegten .footer-Bereichs.
Warum ist @scope interessant?
Gerade bei größeren Projekten hilft @scope, CSS-Komponenten sauber voneinander zu trennen. Statt Selektoren immer weiter zu verschachteln. Das macht Stylesheets übersichtlicher und reduziert die Gefahr, dass globale Styles unbeabsichtigt andere Komponenten beeinflussen. Ein weiterer Vorteil: @scope ist keine zusätzliche Klasse und benötigt kein JavaScript. Der Browser berücksichtigt den Scope direkt bei der CSS-Kaskade und Selektorauswertung.