Fazendo modelos funcionarem com consultas de container

Experiência do Usuário
1

Quero refatorar alguns templates de componentes para melhor suportar as container queries. E precisarei adicionar alguns wrappers adicionais, pois não consegui consultar um contêiner contra si mesmo. Mas se eu fizer isso, me pergunto como nomear melhor os elementos de encapsulamento. Olhando para meus templates, minha nomeação usual coloca um elemento wrapper como o externo e um container como o interno.

.component {
  &__wrapper {
  }
  &__container {
  }
}

Isso parecia fazer muito sentido. Mas para as container queries, eu sempre precisaria declarar o elemento externo como o contêiner. E não será tão intuitivo se os wrappers forem declarados como contêineres. Isso parece muito melhor:

image

Então, me pergunto se alguém já pensou em uma convenção ou uma boa abordagem para isso? Talvez eu esteja pensando demais nisso :thinking: mas é uma mudança disruptiva se eu refatorar os templates, então eu não gostaria de simplesmente agir impulsivamente.

1 curtida