Aninhamento (nesting)

Organizar elementos dentro de outros, em hierarquia, pra agrupar conteúdo e dar estrutura.

Hard

O que é

Aninhamento é a prática de colocar elementos dentro de outros, numa estrutura hierárquica. Você agrupa ou encapsula elementos relacionados dentro de um container pai, criando uma composição organizada, como acontece em dropdown, accordion, abas e menu de navegação.

Na interface, aninhar ajuda em três frentes. Em estrutura, porque dá ordem lógica a um design que cresce em complexidade. Em hierarquia visual, já que o que está dentro do pai é percebido como subordinado a ele. E em reuso, porque um conjunto encapsulado vira uma unidade que dá pra repetir e rearranjar.

Em design de componente, o aninhamento é o pão com manteiga, porque um dropdown, por exemplo, é um botão de gatilho com uma lista de opções aninhada dentro. Bem usado, traz consistência, mas, em excesso, dificulta de entender e de manter.

Em uma frase

Vou aninhar a lista de opções dentro do botão de gatilho e reusar esse dropdown nas outras telas.

A pergunta que ele responde

Como eu organizo elementos dentro de outros pra dar estrutura sem virar uma bagunça de níveis?

Quando usar

Use ao estruturar layout, montar componente reutilizável ou organizar hierarquia de tipografia.

Como não usar

O cuidado é não aninhar nível sobre nível sem necessidade, porque isso cria uma estrutura difícil de ler, depurar e manter.

Na prática

Pense num time montando um componente de dropdown. Ele aninha a lista de opções dentro do botão de gatilho e, a partir daí, reusa esse bloco em várias telas.

Não confunda com

Vale separar aninhamento de hierarquia visual. O aninhamento é a estrutura de elementos dentro de elementos, a organização por dentro, enquanto a hierarquia visual é como o olho percebe importância na tela. Um pode reforçar o outro, mas eles trabalham em planos diferentes.

D

Em inglês

Nesting

Pronúncia

nés-ting

Também chamado de

nesting, elementos aninhados

Origem

n/a

Fonte

Saiba mais

Brad Frost, Atomic Design