CSS-Verschachtelung, Spezifität und du

Hier ist Kilian Valkhof über CSS-Verschachtelung, die noch nicht in Browsern verfügbar ist, aber bald sein wird. Er merkt jedoch einige Unterschiede zwischen CSS-Verschachtelung und Verschachtelung in Sass oder Less an. Nehmen Sie zum Beispiel den folgenden Code

div {
  background: #fff;
  & p {
    color: red;
  }
  border: 1px solid;
}

Wenn CSS-Verschachtelung kommt, wird die letzte Zeile border: 1px solid; nicht auf das Div angewendet, wie es beispielsweise bei Sass der Fall wäre. Das liegt daran, dass bei CSS-Verschachtelung alle Stile, die auf dieses Div angewendet werden sollen, vor den verschachtelten Stilen geschrieben werden müssen. Ich denke, das ergibt viel Sinn, da ich diesen Stil in jeder Sass-Codebasis, an der ich arbeite, durchsetze (es ist einfach viel einfacher zu lesen), aber ich kann mir vorstellen, dass die Leute davon beim ersten Mal verwirrt sein werden.

Eines der kleineren und, aus irgendeinem Grund, super aufregenden Dinge an CSS-Verschachtelung ist, wie wir Medienabfragen verschachteln können, wie Kilian bemerkt, genau so:

body {
  background: red;
  
  @media (min-width: 40rem) {
    & {
      background: blue;
    }
  }
}

Das ist sehr aufregend!

Direkter Link →