Natiivi CSS-sisäkkäisyys

Natiivi CSS Nesting (Baseline 2024, kaikki nykyaikaiset selaimet) mahdollistaa CSS-sääntöjen kirjoittamisen toisten sääntöjen sisään. Syntaksi vastaa aiemmin vain Sass- ja Less-esikääntäjissä käytettävissä ollutta syntaksia. Sisäkkäiset säännöt perivät automaattisesti isäntävalitsimen kontekstin.

Lapsivalitsimet kirjoitetaan isäntäsäännön lohkon sisään. Selain yhdistää isäntä- ja lapsivalitsimet automaattisesti. & eli sisäkkäisyysvalitsin viittaa eksplisiittisesti isäntävalitsimeen muokkaimia ja näennäisluokkia varten.

& edustaa sisäkkäisissä säännöissä eksplisiittisesti isäntävalitsinta. Sitä käytetään näennäisluokkiin (&:hover), näennäiselementteihin (&::before), muokkainluokkiin (&.active) ja attribuuttivalitsimiin (&[disabled]). Ilman &-merkkiä sisäkkäiset säännöt muodostavat jälkeläisvalitsimia.

Näennäiselementtien säännöt voidaan sisällyttää luontevasti isäntäelementin sisään: .button { &::before { content: ""; } &::after { content: ""; } }. Näin kaikki painikkeen tyylit pysyvät yhdessä, eikä tasaiseen CSS:ään tarvittavaa valitsinten toistoa tarvita.

Media queryt ja muut at-säännöt voidaan sisällyttää sääntöjen sisään (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Responsiiviset tyylit pysyvät niitä käyttävän elementin yhteydessä sen sijaan, että ne sijoitettaisiin erilliseen media query -lohkoon tiedoston loppuun.

Sisäkkäisyys ei muuta spesifisyyden sääntöjä — yhdistetyllä valitsimella on sama spesifisyys kuin tasaiseen CSS:ään kirjoitetulla valitsimella. .card .title-valitsimella on sisäkkäisenä tai tasaisena kirjoitettuna sama spesifisyys (0,2,0). Sisäkkäisyys helpottaa syntaksia, mutta ei muuta spesifisyyttä.

Sisäkkäinen valitsin ilman &-merkkiä muodostaa jälkeläisvalitsimen: .card { .title {} } kääntyy muotoon .card .title. Kun käytetään &-merkkiä: .card { &.active {} } kääntyy muotoon .card.active (välilyöntiä ei ole — kyseessä on muokkainluokka, ei jälkeläinen).

Natiivi sisäkkäisyys ei sovellu ihanteellisesti BEM:iin — .block__element- ja .block--modifier-valitsimet ovat merkkijonoja, eikä sisäkkäisyys voi muodostaa niitä pelkällä &-merkillä. Sisäkkäisyyttä kannattaa käyttää näennäisluokkiin ja sisäkkäisiin komponenttirakenteisiin BEM-merkkijonojen yhdistämisen sijaan, sillä se vaatii edelleen esikääntäjän.

Useimmat Sass-sisäkkäisyyden syntaksit ovat identtisiä natiivin CSS-sisäkkäisyyden kanssa. Poikkeuksena Sass sallii &-modifier-merkkijonojen yhdistämisen, mitä natiivi CSS ei tue. Siirtyminen kannattaa aloittaa tarkistamalla &-- ja &__-mallit ja tasoittamalla kyseiset säännöt, mutta säilyttämällä muu sisäkkäisyys.

Natiivi CSS Nesting on tuettu Chrome-versiosta 112, Firefox-versiosta 117 ja Safari-versiosta 16.5 alkaen. Vanhempia selaimia varten PostCSS:n postcss-nesting-laajennus muuntaa natiivin sisäkkäisyyden syntaksin tasaiseksi CSS:ksi koontivaiheen aikana, joten natiivia sisäkkäisyyttä voi käyttää koodin kirjoittamiseen jo nyt.

Chrome DevTools näyttää sisäkkäiset säännöt Styles-paneelissa sisäkkäisessä muodossaan. Sisäkkäistä sääntöä napsauttamalla siirrytään oikeaan lähdekoodin kohtaan Sources-paneelissa. Sisäkkäisen CSS:n vianmääritys on nykyaikaisissa DevTools-työkaluissa yhtä selkeää kuin tasaisen CSS:n vianmääritys.

Natiivi CSS Nesting mahdollistaa Sass-tyylisen sisäkkäisen syntaksin tavallisessa CSS:ssä. &-valitsin muodostaa yhdistelmävalitsimia näennäisluokkia, näennäiselementtejä ja muokkaimia varten. Sisäkkäiset @media-queryt pitävät responsiiviset tyylit yhdessä niitä käyttävien elementtien kanssa. PostCSS muuntaa natiivin sisäkkäisyyden vanhempia selaimia varten, joten ominaisuus voidaan ottaa asteittain käyttöön jo nyt.