Frühe Tage für CSS-Scoping

Es gibt jetzt einen Arbeitsentwurf für CSS-Scoping. Abgesehen von einer seltsamen Periode, in der <style scoped> veröffentlicht wurde und dann anschließend aus dem Entwurf (und Browsern) entfernt wurde, ist dies das am weitesten fortgeschrittene Scoping-Vorschlag, der bisher gemacht wurde (die Level 1-Spezifikation kam nie voran).

Dieser kommt von Miriam Suzanne.

Die Grundlagen

<div class="media">
  <img alt="Proper alt." src="...">
  <div class="content">
    <p>...</p>
  </div>
</div>

Wenn ich dieses HTML-Fragment als „Komponente“ betrachte, ist es schön, dafür Styles schreiben zu können, die explizit nur für sie gelten. Dafür ist @scope da, also…

@scope (.media) {
  :scope {
    display: grid;
    grid-template-columns: 50px 1fr;
  }
  img {
    filter: grayscale(100%);
    border-radius: 50%;
  }
  .content { ... }
}

Was mir daran gefällt ist

1. Dieser CSS-Teil ist ganz explizit für diese Medienkomponente gedacht. Er liest sich so und kann so gepflegt werden.
2. Ich musste mir keinen Namen und keine Klasse für das <img> ausdenken. Ich wende dort Styling an, ohne dass es auf andere Bilder „ausläuft“.

Aber Moment mal, ist das nicht dasselbe, als würde man Selektoren mit der Elternklasse präfixen?

Das ist es irgendwie… so als könnten wir auch schreiben

.media {
}
.media img {
}
.media .content {
}

Und jetzt haben wir die Dinge innerhalb der Medienkomponente eingegrenzt. Das ist ziemlich repetitiv, aber mit nativem CSS-Verschachteln auf dem Weg ist es nur dieses

.media {
  & img {
  }
  & .content {
  }
}

Ja, ich würde sagen, Verschachtelung deckt einige grundlegende Arten von Scoping ab, aber es gibt einige Dinge, die für diesen neuen Scope-Vorschlag einzigartig sind.

Eine einzigartige Funktion ist das „Donut-Scope“, was bedeutet, dass ich das Scoping dort stoppe, wo ich will. Vielleicht möchte ich, dass mein Scoping an einer bestimmten Klasse endet

@scope (.media) to (.content) {
  p { }
}

Jetzt kann ich Styles schreiben, die Bereiche, die ich nicht beeinträchtigen möchte, nicht durcheinanderbringen. Vielleicht

<div class="media">
  <img alt="Proper alt." src="...">
  <p>This is stylable in scope.</p>
  <div class="content">
    <p>This is NOT styleable in scope.</p>
  </div>
</div>

Aber das ist nicht das einzige einzigartige Problem, das dieser neue Entwurf löst. Ich denke, die „nächstgelegene Vorfahrsituation“, die Miriam darlegt, ist vielleicht das Interessanteste. Ich verweise Sie auf den Blogbeitrag, um das zu lesen – es ist ziemlich wild, dass wir dafür noch kein gutes Werkzeug haben.

Hier gibt es viel zu verdauen, besonders wenn man an komplexere Situationen denkt, wie mehrere überlappende Scopes und wie die Verschachtelungssyntax mit Scoping interagieren könnte. Glücklicherweise bloggt Miriam diese Dinge sehr klar.