# CSS Style Queries

> Style Queries CSS: consultas baseadas em estilos de componentes. Próxima evolução após Container Queries para componentes ainda mais inteligentes. Futuro!

URL: https://dpw.dev/css/style-queries/  
Publicado em: 2022-06-27  
Categoria: css  
Tags: web-design-responsivo  
Autor: Tárcio Zemel

Já tratamos aqui no dpw sobre [container queries](/css/o-novo-web-design-responsivo/) e da nova [especificação contain-level-3](https://drafts.csswg.org/css-contain-3/), mas você já ouviu falar em **Style Queries** (**Style Container Queries**), que também faz parte dessa especificação?

Style Queries permitem consultar o estilo de qualquer elemento-pai em uma página e aplicar estilos a seus filhos com base neles.

Parece muito bom, mas, na prática, por que usaríamos isso em algo como uma classe ou atributo `data-*` para aplicar os estilos (ambos com muito mais performance, inclusive)?

É interessante saber porque e quando o uso de style queries realmente faz sentido como um recurso anteriormente indisponível para nós, desenvolvedores front end.

## Container Queries: recapitulação rápida

**TLDR;** container queries permitem consultar um seletor-pai por suas informações de tamanho e estilo e permitem que um filho possua sua lógica responsiva intrínseca, não importando onde ele esteja em uma página.

![2 wireframes de baixa fidelidade lado-a-lado, evidenciando a diferença de atuação de media queries versus container queries.](/images/blog/style-queries/media-queries-vs-container-queries-1024x476.webp)

Em vez de depender da viewport para controlar estilos, agora é possível consultar elementos na página (uma ferramenta muito mais refinada), que são mais relevantes e específicos para o elemento de destino dos estilos de UI.

Esse recurso permite que um novo _entry-point_ consulte e injete estilos responsivos e capacita um componente a possuir sua lógica de estilo responsivo.

Isso torna o componente muito mais resiliente, pois a lógica de estilo está intrinsecamente ligada a ele, não importando onde apareça na página.

Para escrever container queries, primeiro se define um contêiner no elemento-pai para ser consultado:

```
.parent 
```

## Conclusão

Os exemplos mostrados são apenas algumas ideias de como usar **style queries** de forma a permitir uma melhor experiência do desenvolvedor e estilos de componentes mais poderosos e flexíveis.

Essas abordagem modernas realmente atingem seu potencial máximo quando integrados em um sistema maior, onde esses componentes são reutilizados em vários lugares -- e, como sabemos, esta é a abordagem indicada no desenvolvimento web moderno.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml