Respondendo perguntas de responsividade CSS no Twitter
Published: 2023-10-05 03:00:15

Fiz uma postagem pedindo perguntas sobre o tema responsividade CSS, elenquei as melhores pra falar das respostas com um pouco mais de detalhe aqui.

> Bora?

<br />

---

<br />

## Existem boas práticas arquiteturais relacionadas a responsividade? Quais?

{% twitter 1708967449117262284 %}

Bem, são 8 práticas (que eu lembrei):

1- **Evitar uso de height**
Quando os elementos não cabem mais nos seus containers, na grande maioria das vezes eles vão quebrar pra linha de baixo.  Texto se comporta assim por padrão, mas é o comportamento esperado de um container flexbox com `flex-wrap: wrap;` , por exemplo.

&nbsp;

2- **O conteúdo dita o breakpoint e não o contrário**
Pode ser pior pra um layout definir breakpoints prematuramente, ao invés disso, defina apenas breakpoints onde o site quebra.
Inclusive, mais sobre isso no meu artigo sobre breakpoints:

{% embed https://dev.to/lixeletto/responsividade-css-101-breakpoints-1c06 %}

&nbsp;

3- **Unidades estáticas pra limites ex max/min-height/width, relativas e intrínsecas e relativas pra `width` e `height`**
Unidades estáticas são aquelas que representam sempre a mesma coisa independente do contexto, isso faz delas perfeitas pra impor limites. O seu formulário, card ou botão não podem esticar infinitamente numa tela _ultra-wide_ e nem diminuir até ficar ilegível em uma tela pequena. Faz sentido propriedades como `min-width` e `max-width` (ou `clamp()` alternativamente) receberem valores em `px` ou similares.
Já pra `width` e `height` em muitos casos faz sentido unidades relativas como `%` (relativo ao pai) ou `vw` (relativo à largura do viewport), pra que esses aumentem ou diminuam **proporcionalmente**.
Essas duas ferramentas juntas criam componentes sempre legíveis por respeitar os limites, mas que acompanham o tamanho do viewport de forma proporcional.

&nbsp;

4- **Flexbox apenas onde não der pra usar grid**
Flexbox pode causar [CLS (Cumulative Layout Shift)](web.dev/cls) pra conteúdo dinâmico, que é o fenômeno do seu layout chacoalhando enquanto carrega dinamicamente. [Jake Archibald](https://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/) escreveu um artigo ótimo sobre isso e que continua bem atual.

&nbsp;

5- **Grid pra conteúdo dinâmico**
Pelos mesmos motivos citados acima. Como o grid decide o layout dos elementos filhos, o layout permanece íntegro mesmo que eles ainda estejam carregando (dependendo de como tu criar, claro).

&nbsp;

6- **Responsividade por elemento** 
Como citado acima, todo elemento tem sua própria unidade relativa de escala e estática de limite. Além das questões de limites, todo componente tem que ser pensado pra sobreviver do menor viewport ao infinito. Isso faz com que a página seja responsável apenas por orquestrar componentes já responsivos.

&nbsp;

7- **Containers com wrapping que fazem a gestão do layout, não media query**
O foco é a proporcionalidade e resiliência, não pixel perfect. O navegador e os algoritmos de tecnologias modernas de layout fazem uma ótima distribuição automática de elementos, breakpoints não.

&nbsp;

8- **Padding e gap pra espaçamento**
Paddings com `box-sizing: border-box;` e `gap` no flexbox e grid não incrementam no tamanho do layout quando utilizados, `margin` sim. O bug de  "meu layout tem scroll horizontal!!" geralmente é causado por margens e `width` com unidade absoluta.

<br />

---

<br />

## Dúvida: já ouvi um debate sobre usar media query com PX ou REM. Qual tu acha melhor e pq?

{% twitter 1708979246809436634 %}

&nbsp;

**rem** relativo ao _root font size_, segue uma **escala** quando incrementado e seu valor base pode ser redefinido. Um `:root { font-size: 150%; }` pode mudar o que suas media queries significam.

Media queries por sua vez alteram o layout em um ponto específico da largura dele. Específico x relativo? Não faz sentido pra mim, ein?

<br />

---

<br />

## Pode me falar mais sobre os minmax da vida? quando usar? e como usar da forma certa?

{% twitter 1708988966576205824 %}

&nbsp;

- Hoje só CSS grid tem suporte pra `minmax()` , um ótimo exemplo desse layout é o layout RAM (Repeat, Auto-fit, Minmax), escrevi mais sobre isso no meu artigo sobre layouts avançados:
{% embed https://dev.to/lixeletto/padroes-de-layout-avancados-com-css-33ki#:~:text=Repeat%2C%20Auto%2Dfit%2C%20Minmax %}

&nbsp;

- `min()` pega o menor entre dois valores, um ótimo exemplo é [o layout full bled](https://dev.to/lixeletto/padroes-de-layout-avancados-com-css-33ki#:~:text=na%20sua%20aplica%C3%A7%C3%A3o.-,As%20se%C3%A7%C3%B5es,-A%20gente%20pode). Tem um artigo inteiro sobre esse layout [no blog do Josh Comeau](https://www.joshwcomeau.com/css/full-bleed/)

&nbsp;

- O `max()`pega o maior entre os dois valores, interessante pra layouts que são fluidos mas tem um limite de crescimento. 

Em todos esses casos é interessante que pelo menos um dos valores sempre seja relativo.

<br />

---

<br />

## Outra coisa ja abusando, quando eu uso REM, que é relativo ao fontroot e quando eu uso EM que é relativo ao pai? consegue me dar um exemplo onde eu queira usar eles?

{% twitter 1708989256180420862 %}

&nbsp;

O `em` é proporcional ao `font-size` do elemento pai se for aplicado na propriedade `font-size` mesmo. Se aplicado à outra propriedade como `width`, pode ser relativo ao `font-size` do próprio elemento.

Um caso de uso que eu adoro são ícones de fonte. Num caso que o ícone precisa ser maior que o texto, mas crescer junto com ele, você pode dizer que o ícone é, por exemplo `1.2rem`, que é 1.2 x o valor do `font-size` do texto.

Um exemplo prático com `padding` proporcional usando `rem`:

{% codepen https://codepen.io/camilo-micheletto/pen/PomgzVB %}


<br />

---

<br />

## Quais outros aspectos além de “caber bem na tela” tem a responsividade?

{% twitter 1709018441183629759 %}

&nbsp;

> Legibilidade e integridade.
Menos de 60 caracteres de largura não deixam o texto legível, mas fazem caber. A ordem de leitura precisa ser mantida, elementos importantes não podem ser ocultos, **integridade**.

As vezes a gente não consegue garantir todos os layouts, mas precisamos no mínimo garantir a experiência de conteúdo, focando nos dispositivos que os clientes mais usam.
Isso lista nenhuma de site de top 10 breakpoints vai dizer. 

GTM, Clarity, Cloudwatch RUM e afins possuem esse tipo de informação que podem basear priorizações de layout até remoção de polyfills inteiros.

<br />

---

<br />

## Hora da sinceridade

E ai, o que acharam? Eu aprendi muito respondendo essas perguntas e adoraria que vocês mandassem mais aqui!
Vocês responderiam diferente? Bora conversar!