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, todos os seletores precisavam ser declarados explicitamente, separadamente uns dos outros. Isso leva à repetição, ao volume de folhas de estilo e a uma experiência de criação dispersa.

.nesting {
  color: hotpink;
}

.nesting > .is {
  color: rebeccapurple;
}

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

Depois do anilhamento, 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 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. Isso 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 no Chrome 112 e também pode ser testado 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 conferir como ela funciona.