Moderní nativní CSS

Zanořování

Pravidla se dnes dají psát do sebe rovnou v CSS, bez preprocesoru a bez sestavování:

.card {
  padding: var(--space);

  & .title {
    font-size: 1.25rem;
  }

  &:hover {
    border-color: var(--color-action);
  }

  @media (min-width: 40rem) {
    display: flex;
  }
}

Znak & zastupuje vnější selektor, takže & .title je .card .title a &:hover je .card:hover. Celý rozdíl mezi nimi dělá jedna mezera a je to nejčastější překlep v zanořeném CSS:

.card {
  /* .card.is-active – tentýž prvek, který má obě třídy */
  &.is-active { border-color: var(--color-action); }

  /* .card .is-active – potomek uvnitř karty */
  & .is-active { font-weight: 700; }
}

U selektorů, které začínají jménem třídy nebo prvku, se & dá vynechat. Píšeme ho stejně, protože je pak na první pohled vidět, k čemu se pravidlo váže.

Kdy nezanořovat

Zanořování svádí k tomu, kopírovat do CSS strukturu HTML. Tři úrovně vypadají při psaní úhledně, jenže výsledkem je selektor .page .card .body .title, který je zbytečně specifický a nedá se rozumně přebít. Za měsíc pak nikdo netuší, proč se nadpis odmítá obarvit.

Osobně mám za rozumné pravidlo dvě úrovně zanoření a k tomu stavy prvku (&:hover, &[aria-current]), které úroveň nepřidávají. Cokoli hlubšího je většinou signál, že komponenta chce rozdělit na dvě.