Hallo MB,

schön, dass Du CSS-Nesting aufgegriffen hast 😀

Grundsätzlich gilt: Mach Selektoren so spezifisch wie nötig, aber nicht spezifischer. Wenn Du zu spezifisch bist, dann hast Du (a) mehr Schreibarbeit und (b) unnötige Abhängigkeiten zwischen HTML und CSS. Dem CSS Parser wird es egal sein. Ob die Layout-Engine durch überspezifische Selektoren gebremst wird, weiß ich nicht.

Dies hier ist aber - unabhängig von deiner Frage - nicht sinnvoll oder müsste anders formuliert werden.

.view { 
  & :is( .markdown.is-source-view * ),
  :is( .markdown.is-pre-view * ) {
    .header { color: red }
  } 
  ...
}

Das & im geschachtelten Selektor gilt nur für den Teil der Selektorliste, in dem es steht (also bis zum Komma). Im zweiten Teil gilt es nicht.

Es ist aber in beiden Teilen der Selektorliste nicht nötig. Die Selektoren der Liste beginnen nicht mit einem Typselektor (also einem Elementnamen), deswegen funktioniert es auch ohne &, selbst in Chrome.

Und dann hast Du ein :is(), das keine Selektorliste, sondern nur einen einzelnen Selektor enthält. Das ist kein Fehler, aber unnötig. Das :is() kannst Du weglassen. Anders wäre es in dieser Formulierung:

.view {
   .markdown {
      &:is(.is-source-view, .is-pre-view) * {
         .header { color: red }
      }
      &.is-read-view * {
         h1 { color: green; }
      }
   }
}

Wichtig ist hier, dass zwischen & und dem Rest des Selektors keine Leerstelle steht, damit .markdown und .is-...-view auf das gleiche Element zielen.

Ob das Sternchen nötig ist, muss Du wissen. Es verlangt, dass das .markdown-Element kein direktes Elternelement des .header oder h1 Elements sein darf. Also:

<div class="markdown is-source-view">
   <div class="header">DIRECT HEADER</div>
   <div class="sep">
      <div class="header">INDIRECT HEADER</div>
   </div>
</div>

DIRECT HEADER bliebe ungefärbt, INDIRECT HEADER würde rot. Ist diese Unterscheidung für Dich wichtig? Dann lass das * drin. Andernfalls kann es weg.

Wenn Du in .view { ... } weiter nichts steht als .markdown { ... }, kannst Du die Schachtelung auch reduzieren.

.view .markdown {
   &:is(.is-source-view, .is-pre-view) * {
      .header { color: red }
   }
   &.is-read-view {
      h1 { color: green; }
   }
}

Rolf