Natives CSS Nesting, Schluss mit Sass nur fürs Verschachteln 🪺

Natives CSS Nesting ist da, und es macht Sass für den häufigsten Anwendungsfall (Verschachteln von Selektoren) überflüssig. Alle modernen Browser unterstützen es. Zeit, dein Build-Setup zu vereinfachen.

🤔 Was ist CSS Nesting überhaupt?

Wenn du jemals Sass oder SCSS benutzt hast, kennst du das: Selektoren ineinander verschachteln, um die Struktur deines HTMLs im CSS abzubilden. Das war jahrelang der Grund, warum viele überhaupt einen Präprozessor eingesetzt haben.

Und jetzt? Jetzt kann CSS das nativ. Kein Compiler, kein Build-Step, kein node_modules-Ordner voller Sass-Dependencies. Einfach CSS schreiben und es funktioniert.

📝 Die Grundlagen, So sieht es aus

Das Prinzip ist simpel: Du schreibst deine Child-Selektoren direkt innerhalb des Parent-Selektors. Genau wie in Sass.

.card {
  background: white;
  border-radius: 8px;

  .card-title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  .card-body {
    padding: 1rem;
    line-height: 1.6;
  }
}

Das war's. Kein spezielles Setup nötig. Dein Browser versteht das.

🔗 Der &-Selektor, Dein bester Freund

Wie in Sass gibt es auch in nativem CSS den &-Selektor. Er referenziert den äußeren Selektor und ist besonders nützlich für Pseudo-Klassen, Pseudo-Elemente und zusammengesetzte Selektoren.

.button {
  background: #3b82f6;
  color: white;
  transition: background 0.2s;

  &:hover {
    background: #2563eb;
  }

  &:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  &.button--large {
    padding: 1rem 2rem;
    font-size: 1.25rem;
  }

  &::after {
    content: " →";
  }
}

Wichtig: Bei Pseudo-Klassen und Pseudo-Elementen ist der & optional, du kannst auch direkt :hover { } schreiben. Aber explizit ist besser als implizit, oder?

📏 Verschachtelungsregeln, Was geht und was nicht

Es gibt ein paar Regeln, die du kennen solltest:

Element-Selektoren brauchen & oder eine relative Syntax. Du kannst nicht einfach div { } innerhalb eines Selektors schreiben. Stattdessen:

.container {
  /* So geht's: */
  & div {
    margin: 1rem;
  }

  /* Oder mit dem relaxed parsing (seit 2024): */
  div {
    margin: 1rem;
  }
}

Die sogenannte "relaxed nesting syntax" erlaubt mittlerweile auch nackte Element-Selektoren in allen modernen Browsern. Ursprünglich war das nicht möglich, ein Relikt aus der ersten Spezifikation.

Mehrfach verschachteln? Klar!

.page {
  .sidebar {
    .nav-item {
      color: gray;

      &:hover {
        color: black;
      }
    }
  }
}

Aber übertreib's nicht. Drei Ebenen sind meistens das Maximum, bevor dein CSS unlesbar wird.

📱 Media Queries innerhalb von Nesting

Und hier wird es richtig spannend. Du kannst Media Queries direkt in deinen Selektor verschachteln. Schluss mit dem ewigen Hin- und Herspringen zwischen Selektoren und Media Queries!

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

Das ist für mich persönlich der größte Gamechanger. Alle Styles eines Elements an einem Ort. Genial.

⚔️ Sass Nesting vs. Native CSS Nesting, Die Unterschiede

Auf den ersten Blick sieht alles gleich aus. Aber es gibt ein paar feine Unterschiede, die du kennen solltest:

Der größte Gotcha: In Sass wird &__element zu .block__element kompiliert. In nativem CSS funktioniert das nicht. Der & ist ein echtes Selektor-Replacement, keine String-Konkatenation. Wer BEM verwendet, muss hier umdenken.

Außerdem: Die Specificity bei nativem Nesting verhält sich so, als würdest du :is() verwenden. Das kann in Einzelfällen zu anderen Ergebnissen führen als bei kompiliertem Sass.

🪦 @nest, Kurz gelebt, schon beerdigt

Falls du mal von der @nest-Regel gehört hast: Vergiss sie. Sie war Teil eines frühen Entwurfs der Spezifikation und wurde nie in Browsern implementiert. Stattdessen haben wir die "relaxed nesting syntax" bekommen, die deutlich eleganter ist.

Die Kurzversion: Früher musste man bei bestimmten Selektoren explizit & voranstellen. Heute ist das in den allermeisten Fällen optional.

🚀 Kombiniert mit modernem CSS, Hier wird's mächtig

Natives CSS Nesting entfaltet seine volle Kraft in Kombination mit anderen modernen CSS-Features.

Mit CSS Variables

.theme-dark {
  --bg: #1a1a2e;
  --text: #e0e0e0;
  --accent: #e94560;

  .card {
    background: var(--bg);
    color: var(--text);

    .card-link {
      color: var(--accent);

      &:hover {
        opacity: 0.8;
      }
    }
  }
}

CSS-Variablen: Flexibles Styling für deine Komponenten 🎨

Erfahre, wie du CSS Custom Properties nutzt, um flexibles und wartbares Styling zu erstellen.

disane.dev

Mit :has(), Der "Parent Selector"

.form-group {
  border: 1px solid #ccc;

  &:has(input:invalid) {
    border-color: red;

    .error-message {
      display: block;
    }
  }

  &:has(input:focus) {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }
}

Mit Container Queries

.widget {
  container-type: inline-size;

  .widget-content {
    display: flex;
    flex-direction: column;

    @container (min-width: 400px) {
      flex-direction: row;
    }
  }
}

Siehst du das Muster? Alles, was zu einem Element gehört, steht an einem Ort. Das ist der Traum von Component-based CSS, ohne JavaScript-Framework.

Tailwind CSS vs. Vanilla CSS – Wann lohnt sich was?

Ein Vergleich zwischen Tailwind CSS und Vanilla CSS – wann sich welcher Ansatz lohnt.

disane.dev

🔄 Migrations-Guide: Sass-Nesting loswerden

Du willst Sass nur fürs Nesting los werden? Hier ist dein Plan:

1. Identifiziere deine Sass-Features. Nutzt du wirklich nur Nesting? Oder auch Mixins, Functions, Loops? Wenn ja, brauchst du Sass wahrscheinlich noch.

2. Ersetze &__element-Patterns. BEM-Konkatenation funktioniert nicht in nativem CSS. Schreib die Selektoren aus:

/* Sass */
.block {
  &__element { color: red; }
  &--modifier { color: blue; }
}

/* Native CSS */
.block {
  .block__element { color: red; }
  .block--modifier { color: blue; }
}

3. Benenne deine Dateien um. Von .scss zu .css. Entferne Sass-spezifische Syntax wie $variables und ersetze sie durch CSS Custom Properties.

4. Entferne den Sass-Compiler. Aus deiner package.json, deinem Webpack/Vite-Config, überall.

5. Teste gründlich. Besonders die Specificity kann sich ändern. Schau dir Edge Cases an.

🌐 Browser-Support

Die gute Nachricht: Natives CSS Nesting wird von allen modernen Browsern unterstützt.

Chrome 120+, Firefox 117+, Safari 17.2+ und Edge 120+ sind dabei. Das deckt über 90% der Nutzer ab. Die relaxed Nesting Syntax (ohne & für Element-Selektoren) ist seit Mitte 2024 ebenfalls überall verfügbar.

CSS Nesting | Can I use...

Browser support tables for CSS Nesting across desktop and mobile browsers.

Can I use

Falls du noch ältere Browser unterstützen musst: Der PostCSS Nesting Plugin kann natives Nesting in flaches CSS kompilieren. So kannst du die Syntax heute nutzen und trotzdem kompatibel bleiben.

CSS nesting - CSS | MDN

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another.

MDN Web Docs

💡 Fazit

Natives CSS Nesting ist kein Experiment mehr, es ist Production-ready. Wenn du Sass bisher nur fürs Verschachteln genutzt hast, gibt es keinen Grund mehr dafür. Dein CSS wird einfacher, dein Build schneller, und deine Dependencies weniger.

Klar, Sass hat noch seine Berechtigung für komplexe Projekte mit Mixins, Functions und Loops. Aber für die meisten Projekte reicht modernes CSS mittlerweile völlig aus. Und das ist eine gute Sache.

Also: Probier's aus. Verschachtle drauf los. Dein Bundler wird es dir danken. 🚀