Native CSS-nesting

Indbygget CSS-indlejring (basisunderstøttelse fra 2024 i alle moderne browsere) gør det muligt at skrive CSS-regler inde i andre regler, med en syntaks, der minder om den indlejring, som tidligere kun var tilgængelig i Sass- og Less-forprocessorer. Indlejrede regler arver automatisk den overordnede vælgers kontekst.

Skriv underordnede vælgere inde i blokken for en overordnet regel. Browseren kombinerer automatisk de overordnede og underordnede vælgere. Et & (indlejringsvælger) henviser eksplicit til den overordnede vælger for modifikatorer og pseudoklasser.

& repræsenterer eksplicit den overordnede vælger i indlejrede regler. Brug den til pseudoklasser (&:hover), pseudoelementer (&::before), modifikatorklasser (&.active) og attributvælgere (&[disabled]). Uden & opretter indlejrede regler efterkommervælgere.

Indlejr regler for pseudoelementer naturligt inde i det overordnede element: .button { &::before { content: ""; } &::after { content: ""; } }. Det samler alle knapstilarter på ét sted og undgår gentagelse af vælgere, som er nødvendig i flad CSS.

Medieforespørgsler og andre at-regler kan indlejres i regler (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Responsive stilarter ligger sammen med det element, de påvirker, i stedet for i en separat medieforespørgselsblok til sidst i filen.

Indlejring ændrer ikke reglerne for specificitet — den kombinerede vælger har samme specificitet, som hvis den var skrevet fladt. .card .title har samme specificitet, uanset om den er skrevet indlejret eller fladt (0,2,0). Indlejring er en syntaksmæssig bekvemmelighed, ikke en ændring af specificiteten.

En indlejret vælger uden & opretter en efterkommervælger: .card { .title {} } oversættes til .card .title. Med &: .card { &.active {} } oversættes til .card.active (intet mellemrum — en modifikatorklasse, ikke en efterkommer).

Indbygget indlejring er ikke ideel til BEM — vælgerne .block__element og .block--modifier er strenge, og indlejring kan ikke konstruere dem alene med &. Brug indlejring til pseudoklasser og indlejrede komponentstrukturer i stedet for sammenkædning af BEM-strenge (det kræver stadig en forprocessor).

Det meste af Sass' indlejringssyntaks er identisk med indbygget CSS-indlejring. Undtagelsen er, at Sass tillader sammenkædning af strenge med &-modifier (det gør indbygget CSS ikke). Overgangen sker ved at lede efter mønstre med &- eller &__ og udfolde netop disse regler, mens den øvrige indlejring bevares.

Indbygget CSS-indlejring understøttes i Chrome 112+, Firefox 117+ og Safari 16.5+. Til ældre browsere kan du bruge PostCSS med postcss-nesting til at omdanne indbygget indlejringssyntaks til flad CSS under bygningen — så du kan skrive med indbygget indlejring allerede i dag.

Chrome DevTools viser indlejrede regler i deres indlejrede form i panelet Styles. Når du klikker på en indlejret regel, springer du til den korrekte kildeplacering i panelet Sources. Fejlfinding af indlejret CSS er lige så tydelig som fejlfinding af flad CSS i moderne DevTools.

Indbygget CSS-indlejring gør Sass-lignende indlejringssyntaks mulig i almindelig CSS. Vælgeren & opretter sammensatte vælgere til pseudoklasser, pseudoelementer og modifikatorer. Indlejrede @media-forespørgsler placerer responsive stilarter sammen med de elementer, de påvirker. PostCSS omdanner indbygget indlejring til ældre browsere, så du gradvist kan tage teknologien i brug allerede i dag.