Sobre Element Queries, usar ou não usar?

[pedrogustavo]

Fala galera, estava dando uma pesquisada sobre media queries e encontrei o Element queries gostei bastante da proposta dele, porém me surgiram muitas dúvidas, se seria recomendado utilizar em um projeto grande, se mais alguém já teve alguma experiência com essa ferramenta, ou se existe uma melhor forma de se trabalhar com element queries.

[felipefialho]

Cara, sinceramente não conheço.

Alguém? @frontendbr/admins

[diogomoretti]

Me parece que não tem uma escalabilidade e uma manutenção muito boa não 😅

[bernardodiasc]

Acho Element Queries incrível. To de olho nisso tem um tempo, mas o projeto que estou trabalhando nos últimos meses é apenas desktop (ainda), então não tive oportunidade de testar essa biblioteca/abordagem.

O que imagino é que seja extremamente eficaz para projetos modulares, no caso aqui é React e CSS Modules, então combina demais com Element Queries pois o desenvolvimento é feito nos componentes isolados antes de montar o quebra-cabeça, e dessa forma posso modificar a aparência dos componentes baseado no próprio tamanho! Basicamente a Media Query não é tão relevante já que o CSS é todo local, específico para componentes de modo que não sabem necessariamente o contexto, faço inclusive CSS reset no nível do componente (isso mesmo, adiós cascata e herança, cada componente é um novo começo).

No caso de manutenção e escalabilidade, acho que faz sentido dificultar num projeto convencional, eu mesmo não curto usar lib JS pra manipular o visual, e se tendo um CSS global acho que poderia mesmo atrapalhar mais do que ajudar. Mas no caso de CSS local (CSS-Modules) e SPA (React), isso ai cai como uma luva. :)

[bernardodiasc]

Observação, o prolyfill que eu conhecia é esse https://au.si/css-container-element-queries (https://github.com/ausi/cq-prolyfill). Pelo que entendi tem o mesmo propósito do Element Queries.

[pedrogustavo]

Valeu pelas dicas, vou continuar de olho em element queries e fazer mais alguns testes.

[raphaguasta]

Fala pessoal!

Li um pouco sobre o tema agora, e me parece bem interessante pra algumas situações, porém não creio que substitua, de fato as media queries.

Pelo pouco que vi, imaginei algumas poucas situações onde element queries podem ser úteis:

- Formulários: Podemos usar element queries pra contar caracteres de e setar estilos para forms vazios ou incompletos, etc.

- Formulários de novo: Para <textarea> onde há limite de caracteres. Twitter feelings...

- Boxes responsivos: Eventualmente num projeto responsivo, temos uma grid com boxes cheios de informações. Muitas vezes a visibilidade de alguns elementos fica ruim ou quando o box fica pequeno demais, ou quando fica longe demais, independente da resolução. Fazer a querie em cima dos boxes pode ser uma boa!

- Menus e semelhantes: Já vi casos de menus horizontais em %, que tem layout fluído até a medida de tablet, que apesar do layout estar certinho, as vezes uma palavra quebra tudo. As vezes é necessário tirar um botão, diminuir espaçamentos, coisas pequenas, mas que são resolvidas com media queries. Nesse caso element queries tbm seriam melhores! :)

Não utilizei ainda, e seria válido testar num projeto. Mas a princípio, pelo pouco que enxerguei, ainda não consigo enxergar tantas vantagens para usar efetivamente.