Aninhamento CSS

O CSS moderno permite aninhar regras como em um mapa de pastas. No Belavista, o menu e o cartaz ficam legíveis no mesmo arquivo styles.css, sem pré-processador obrigatório.

O exemplo deste capítulo é 23-aninhamento, no pacote que acompanha o volume. Troque um & ou um nível de aninhamento, preveja o seletor final, recarregue e confira nas DevTools.

O que você vai aprender

• Aninhar seletores para mostrar hierarquia.
• Usar & quando a relação precisa ser explícita.
• Aninhar media queries e outras at-rules.
• Entender o impacto do aninhamento na especificidade.
• Evitar aninhamento inválido ou profundo demais.

Relação sem repetir o pai

Em vez de repetir .cartaz em cada linha, aninhe:

.cartaz {
  padding: 1rem;
  border: 1px solid #1a1a1a;

  h2 {
    margin-block-start: 0;
    font-size: 1.25rem;
  }

  p {
    line-height: 1.5;
  }
}

O navegador trata como .cartaz h2 e .cartaz p. A leitura no arquivo acompanha o HTML.

O seletor &

& representa o seletor pai. É obrigatório em alguns casos, como pseudo-classes no mesmo elemento ou composição com o pai:

.botao {
  background: #1a1a1a;
  color: #fff;

  &:hover {
    background: #8b1e1e;
  }

  &.destaque {
    letter-spacing: 0.05em;
  }

  .icone & {
    /* vira .icone .botao */
    display: inline-flex;
  }
}

Sem & em &:hover, a regra pode ficar inválida ou significar outra coisa, conforme o contexto.

At-rules aninhadas

Media queries dentro do bloco mantêm o contexto:

.folha {
  width: 100%;

  @media (min-width: 40rem) {
    width: 36rem;
    margin-inline: auto;
  }
}

Especificidade e profundidade

Cada nível aninhado junta seletores. Três níveis de classe pesam como três classes. Não enterre .nav .lista .item .link só porque o aninhamento “permite”. Prefira um ou dois níveis e classes claras.

Erro comum: esquecer & em :hover / :focus e achar que o navegador “adivinha”. Confira o seletor compilado nas DevTools (aba Styles).

Critério para avançar

Você avança se: reescreve um bloco plano em aninhamento equivalente; usa &:focus-visible num botão; limita a profundidade a algo legível.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Reescreva .menu a { color: inherit; } e .menu a:hover { text-decoration: underline; } com aninhamento.
2. Quando o & é necessário?
3. Aninhar três classes aumenta a especificidade? Por quê?

Respostas comentadas

1. .menu { a { color: inherit; &:hover { text-decoration: underline; } } }
2. Quando você cola o pai ao seletor atual (pseudo-classe no mesmo elemento, classe composta, ou inverte a ordem com o pai à direita).
3. Sim. O seletor final junta os três; na pontuação de classes, são três “pontos” de classe.