Transição de CSS

Um dos nossos recursos favoritos do pré-processador CSS agora está integrado à linguagem: regras de estilo aninhadas.

Adam Argyle

Antes do aninhamento, cada seletor precisava ser declarado explicitamente, separadamente um do outro. Isso leva à repetição, folha de estilo em massa e uma experiência de criação esparsa.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

.nesting > .is > .awesome {
  color: deeppink;
}

Após o aninhamento, os seletores podem ser continuados, e as regras de estilo relacionadas a ele podem ser agrupadas.

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Teste isso no navegador.

O aninhamento ajuda os desenvolvedores a reduzir a necessidade de repetir os seletores, além de co-localizar regras de estilo para elementos relacionados. Ele também pode ajudar os estilos a corresponder ao HTML de destino. Se o componente .nesting no exemplo anterior foi removido do projeto, você pode excluir o grupo inteiro em vez de pesquisar arquivos para instâncias de seletor relacionadas.

O aninhamento pode ajudar com: - Organização - Redução do tamanho do arquivo - Refactoring

O aninhamento está disponível a partir do Chrome 112 e também para teste na Prévia técnica do Safari 162.

Introdução ao aninhamento de CSS

No restante desta postagem,o sandbox de demonstração a seguir é usado para ajudar você a visualizar as seleções. Nesse estado padrão, nada é selecionado e tudo fica visível. Ao selecionar as várias formas e tamanhos, você pode praticar a sintaxe e vê-la em ação.

Dentro do sandbox há círculos, triângulos e quadrados. Alguns são pequenos, médios ou grandes. Outras são azuis, rosas ou roxas. Eles estão todos dentro do elemento que contém .demo. Confira abaixo uma prévia dos elementos HTML que você vai segmentar.

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

Exemplos de aninhamento

O aninhamento do CSS permite definir estilos para um elemento no contexto de outro seletor.

.parent {
  color: blue;

  .child {
    color: red;
  }
}

Neste exemplo, o seletor de classe .child está aninhado no seletor de classe .parent. Isso significa que o seletor .child aninhado só será aplicado a elementos que são filhos de elementos com uma classe .parent.

Esse exemplo pode ser escrito usando o símbolo & para indicar explicitamente onde a classe mãe precisa ser colocada.

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

Esses dois exemplos são funcionalmente equivalentes, e o motivo para você ter opções se tornará mais claro à medida que exemplos mais avançados forem explorados neste artigo.

Como selecionar os círculos

Neste primeiro exemplo, a tarefa é adicionar estilos para desbotar e desfocar apenas os círculos dentro da demonstração.

Sem aninhamento, o CSS atual:

.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

Com aninhamento, há duas maneiras válidas:

/* & is explicitly placed in front of .circle */
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

ou

/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

Como resultado, todos os elementos dentro de .demo com uma classe .circle serão desfocados e quase invisíveis:

Selecionar triângulos e quadrados

Essa tarefa requer a seleção de vários elementos aninhados, também chamado de seletor de grupo.

Sem aninhamento, o CSS tem duas maneiras:

.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}

ou usando :is()

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

Com o aninhamento, há duas maneiras válidas:

.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

ou

.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

Como resultado, apenas os elementos .circle permanecem dentro de .demo:

Como selecionar triângulos e círculos grandes

Essa tarefa exige um seletor composto, em que os elementos precisam ter as duas classes presentes para serem selecionados.

Sem aninhamento, o CSS atual:

.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

ou

.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

Com aninhamento, há duas maneiras válidas:

.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

ou

.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

Como resultado, todos os triângulos e círculos grandes estão escondidos dentro de .demo:

Dica profissional com seletores compostos e aninhamento

O símbolo & é seu amigo aqui, porque mostra explicitamente como anexar seletores anexados. Veja o exemplo a seguir:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

Embora seja uma maneira válida de aninhar, os resultados não corresponderão aos elementos esperados. O motivo é que, sem & para especificar o resultado desejado de .lg.triangle, .lg.circle compostos, o resultado real seria .lg .triangle, .lg .circle; seletores descendentes.

Selecionar todas as formas exceto as rosas

Essa tarefa requer uma pseudoclasse funcional de negação, em que os elementos não podem ter o seletor especificado.

Sem aninhamento, o CSS atual:

.demo :not(.pink) {
  opacity: .25;
  filter: blur(25px);
}

Com aninhamento, há duas maneiras válidas:

.demo {
  :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

ou

.demo {
  & :not(.pink) {
    opacity: .25;
    filter: blur(25px);
  }
}

O resultado: todas as formas que não são rosa são ocultas dentro de .demo:

Precisão e flexibilidade com &

Digamos que você queira segmentar .demo com o seletor :not(). & é obrigatório para isso:

.demo {
  &:not() {
    ...
  }
}

Isso compõe .demo e :not() a .demo:not(), ao contrário do exemplo anterior, que precisava de .demo :not(). Esse lembrete é muito importante quando você quer aninhar uma interação :hover.

.demo {
  &:hover {
    /* .demo:hover */
  }

  :hover {
    /* .demo :hover */
  }
}

Mais exemplos de aninhamento

A especificação CSS para aninhamento inclui mais exemplos. Se você quiser saber mais sobre a sintaxe com exemplos, ele abrange uma ampla gama de exemplos válidos e inválidos.

Os próximos exemplos vão apresentar brevemente um recurso de aninhamento do CSS para ajudar você a entender a amplitude dos recursos que ele apresenta.

Aninhamento de @media

Pode ser uma distração se mover para outra área da folha de estilo e encontrar condições de consulta de mídia que modifiquem um seletor e os estilos dele. Essa distração acabou com a capacidade de aninhar as condições dentro do contexto.

Para conveniência da sintaxe, se a consulta de mídia aninhada estiver modificando apenas os estilos para o contexto de seletor atual, uma sintaxe mínima poderá ser usada.

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

O uso explícito de & também pode ser utilizado:

.card {
  font-size: 1rem;

  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

Este exemplo mostra a sintaxe expandida com &, além de direcionar os cards .large para demonstrar que outros recursos de aninhamento continuam funcionando.

Saiba mais sobre anilhamento de @rules.

Aninhamento em qualquer lugar

Todos os exemplos até este ponto continuaram ou foram anexados a um contexto anterior. Você pode mudar ou reorganizar completamente o contexto, se necessário.

.card {
  .featured & {
    /* .featured .card */
  }
}

O símbolo & representa uma referência a um objeto de seletor (não uma string) e pode ser colocado em qualquer lugar em um seletor aninhado. Ele pode até ser colocado várias vezes:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

Embora esse exemplo pareça inútil, há cenários em que repetir um contexto de seletor é útil.

Exemplos de aninhamento inválido

Alguns cenários de sintaxe de aninhamento são inválidos e podem surpreendê-lo se você estiver aninhando em pré-processadores.

Anilhamento e concatenação

Muitas convenções de nomenclatura de classe CSS contam com a capacidade de concatenar ou anexar seletores como se fossem strings. Isso não funciona no aninhamento de CSS, já que os seletores não são strings, são referências de objetos.

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

Uma explicação mais detalhada pode ser encontrada na especificação.

Exemplo de aninhamento complicado

Anilhamento em listas de seletores e :is()

Considere o seguinte bloco de CSS aninhado:

.one, #two {
  .three {
    /* some styles */
  }
}

Este é o primeiro exemplo que começa com uma lista de seletores e continua aninhando. Os exemplos anteriores terminavam com uma lista de seletores. Não há nada inválido neste exemplo de aninhamento, mas há um detalhe de implementação potencialmente complicado sobre aninhamento em listas de seletores, especialmente aqueles que incluem um seletor de ID.

Para que o intent do aninhamento funcione, qualquer lista de seletores que não seja o mais interno será unida a :is() pelo navegador. Esse agrupamento mantém o agrupamento da lista de seletores em todos os contextos criados. O efeito colateral desse agrupamento, :is(.one, #two), é que ele adota a especificidade da maior pontuação entre os seletores entre parênteses. É assim que o :is() sempre funciona, mas pode ser uma surpresa quando se usa a sintaxe de aninhamento porque não é exatamente o que foi criado. Resumindo, aninhar com IDs e listas de seletores pode levar a seletores de especificidade muito altos.

Para recapitular claramente o exemplo complicado, o bloco de aninhamento anterior será aplicado ao documento desta forma:

:is(.one, #two) .three {
  /* some styles */
}

Fique de olho ou ensine seus linters a alertar quando houver aninhamento dentro de uma lista de seletores que usa um seletor de ID. A especificidade de todo o aninhamento dentro dessa lista de seletores será alta.

Como misturar aninhamento e declarações

Considere o seguinte bloco de CSS aninhado:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

A cor dos elementos .card será blue.

Todas as declarações de estilo misturado são elevadas para a parte superior, como se fossem criadas antes da ocorrência de qualquer aninhamento. Confira mais detalhes na especificação.

Existem maneiras de evitar isso. O código a seguir agrupa os três estilos de cor em &, que mantém a ordem em cascata conforme o autor pretendia. A cor dos elementos .card será vermelha.

.card {
  color: green;
  & { color: blue; }
  & { color: red; }
}

Na verdade, é recomendável unir todos os estilos que seguem o aninhamento com uma &.

.card {
  color: green;

  @media (prefers-color-scheme: dark) {
    color: lightgreen;
  }

  & {
    aspect-ratio: 4/3;
  }
}

Detecção de recursos

Há duas maneiras de detectar o aninhamento de CSS: use o aninhamento ou use @supports para verificar o recurso de análise de seletor de aninhamento.

Como usar a aninhação:

html {
  .has-nesting {
    display: block;
  }

  .no-nesting {
    display: none;
  }
}

Utilizando @supports:

@supports (selector(&)) {
  /* nesting parsing available */
}

Meu colega Bramus tem um ótimo Codepen mostrando essa estratégia.

Depurar com o Chrome DevTools

O suporte atual no DevTools para aninhamento é mínimo. Atualmente, os estilos são representados no painel de estilos como esperado, mas o rastreamento do aninhamento e o contexto completo do seletor ainda não são compatíveis. Temos um design e planos para tornar isso transparente e claro.

O Chrome 113 planeja ter suporte adicional para aninhamento de CSS. Fique por dentro das novidades.

O futuro

O anilhamento de CSS está disponível apenas na versão 1. A versão 2 vai introduzir mais açúcar sintático e, possivelmente, menos regras para memorizar. Há muita demanda para que a análise do aninhamento não seja limitada ou tenha momentos complicados.

O aninhamento é uma grande melhoria na linguagem CSS. Ele tem implicações de autoria em quase todos os aspectos arquitetônicos do CSS. Esse grande impacto precisa ser profundamente analisado e compreendido antes que a versão 2 possa ser especificada.

Por fim, confira uma demonstração que usa @scope, aninhamento e @layer juntos. É tudo muito empolgante!