
Escolher uma paleta de cores para um projeto não é uma tarefa muito fácil, pelo menos para mim. Além de precisar se preocupar em ter cores que combinam entre si e ficam bonitas na tela, também precisamos ter certeza que nossa paleta é acessível.

O que eu não sabia era que eu mais precisava era de um **sistema de cores**.

O **[Radix Colors](https://www.radix-ui.com/colors)** é um sistema de cores open-source, feito para criarmos sites e aplicativos bonitos e acessíveis.

Esse sistema de cores funciona assim: todas as 28 cores estão em uma escala de 1 a 12 e preparadas para serem usadas de acordo com algumas regras.

![Escala de cores Radix Colors](/posts/paleta-de-cores-perfeita-para-seu-projeto/escala-de-cores-radix-colors-light.png)

## Criando paletas com o sistema de cores Radix Colors

Para compor uma paleta de cores com o Radix Colors, **podemos começar usando umas das 20 cores de destaque disponíveis**. Dessas cores, 15 foram escolhidas para funcionarem bem com o texto em branco e 5 com o texto em preto.

![Cores de destaque da Radix Colors](/posts/paleta-de-cores-perfeita-para-seu-projeto/cores-destaque-radix-colors.svg)

Depois de escolher uma ou várias cor de destaque, **precisamos de uma escala de cinza**. O Radix Colors vêm com 6 escalas de cinza diferentes, criadas para combinarem com diferentes cores de destaque.

Para um resultado mais natural, você pode escolher a escala de cinza de acordo com as suas cores de destaque:

- `Gray` é cinza puro, boa para uma combinação mais neutra;
- `Mauve` tem tonalidades de roxo e combina com `Tomato`, `Red`, `Crimson`, `Pink`, `Plum`, `Purple` e `Violet`;
- `Slate` tem tonalidades de azul e combina com `Indigo`, `Blue`, `Sky` e `Cyan`;
- `Sage` tem tonalidades de verde e combina com `Teal`, `Mint` e `Green`;
- `Olive` tem tonalidades de limão e combina com `Grass` e `Lime`;
- `Sand` tem tonalidades de amarelo e combina com `Yellow`, `Amber`, `Orange` e `Brown`.

Depois de ter nossa escala de cinza, o próximo passo é **escolher as cores semânticas**. Essas cores estão relacionadas com o que seus elementos querem comunicar, como um erro, sucesso ou informação.

- **Erro**: `Red`, `Tomato` ou `Crimson`;
- **Sucesso**: `Teal`, `Green`, `Grass` e `Mint`;
- **Aviso**: `Yellow` ou `Amber`;
- **Info**: `Blue`, `Sky` ou `Cyan`.

Vale a pena lembrar que essas combinações fazem bastante sentido na cultura ocidental, mas seu significado pode ser diferente em outras culturas.

Em aplicações mais complexas, é possível que você escolha quase todas as cores para fazerem parte da sua paleta. O bom de usar um sistema de cores como o Radix Colors é que todas as escalas de cores funcionam bem entre si.

Para finalizar, **precisamos escolher as escalas de cores para nosso texto**. Existem duas formas de escolher as cores do texto com o Radix Colors.

A primeira é usando o número 11 ou 12 da escala de uma das cores de destaque, que funcionam bem para textos de baixo-contraste e de alto-contraste respectivamente. Essas cores trarão um resultado mais colorido.

Se você está procurando um resultado mais sério, vale a pena usar o número 11 ou 12 das escalas de cinza.

![Cores de texto número 11 em cor de fundo número 3 no Radix Colors](/posts/paleta-de-cores-perfeita-para-seu-projeto/cores-texto-radix-colors.svg)

## Usando escalas de cores efetivamente no seu site/aplicativo

As escalas de cores do Radix Colors são numeradas do 1 ao 12. Esses números nos ajudam a escolher os tons corretos para cada aplicação. A [página de documentação do Radix Colors](https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale) explica com detalhes quando usar cada tonalidade. Aqui vai um resumo:

| Número | Aplicações                                            |
| ------ | ----------------------------------------------------- |
| 1      | Cor de fundo do site/aplicativo                       |
| 2      | Cor de fundo sutil                                    |
| 3      | Cor de fundo de um elemento da interface              |
| 4      | Cor de fundo durante o _hover_ de um elemento         |
| 5      | Cor de fundo de elementos selecionados ou ativos      |
| 6      | Bordas sutis e separadores                            |
| 7      | Bordas de elementos da interface ou indicador de foco |
| 8      | Cor da borda durante o _hover_ de um elemento         |
| 9      | Cores de fundo sólidas                                |
| 10     | Cores de fundo sólidas durante o _hover_              |
| 11     | Texto de baixo-contraste                              |
| 12     | Texto de alto-contraste                               |

![Exemplos de aplicação das Radix Colors](/posts/paleta-de-cores-perfeita-para-seu-projeto/exemplos-aplicacao-radix-colors.svg)

## Usando o Radix Colors no seu projeto

Para usar o Radix Colors no seu projeto, você deve instalar o pacote do npm `@radix-ui/colors`.

```bash
npm install @radix-ui/colors

# se estiver usando o yarn:
yarn add @radix-ui/colors
```

Todas as escalas de cores estão disponíveis como objetos JavaScript. Para usá-las com `styled-components`, por exemplo, basta importar as cores que você quiser e interpolar seus valores no CSS.

```js
import { gray, blue } from "@radix-ui/colors";
import styled from "styled-components";

let Button = styled.button`
  background-color: ${gray.gray4};
  color: ${blue.blue10};
`;
```

Se você quiser usar as cores diretamente no CSS, sem uma biblioteca de CSS-in-JS, basta importar as cores que você quiser no CSS:

```css
@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/blue.css";

.button {
  background-color: var(--gray4);
  color: var(--blue10);
}
```

Para que esses `@import`s funcionem, você precisará utilizar um _bundler_ como Parcel, Webpack ou um framework que já faça o _bundle_ de imports CSS por baixo dos panos (NextJS, por exemplo).

A [página de documentação do Radix Colors](https://www.radix-ui.com/docs/colors/getting-started/usage) tem muito mais exemplos de como usá-lo em várias configurações diferentes.

## Acessibilidade na sua paleta de cores

Um passo bastante importante na escolha das cores do seu site/aplicativo é verificar o contraste entre as cores utilizadas. Isso é muito importante para assegurar que mais pessoas possam efetivamente ler e utilizar sua interface.

Os [WCAG 2](https://webaim.org/articles/contrast/) define importantes requisitos de cor e contraste. Em geral, **precisamos de um contraste de 4.5:1 para texto, no mínimo**.

No Radix Colors, os números 11 e 12 de cada escala devem ter contraste suficiente com os números 1 e 2. Os números 9 de cada escala também passam nas regras de contraste com texto preto ou branco.

Para testar o contraste de elementos no Chrome, você pode usar a ferramenta de seleção para inspeção e colocar o mouse sobre um texto.

![Verificando a acessibilidade de um texto com a ferramenta de seleção para inspeção do Chrome](/posts/paleta-de-cores-perfeita-para-seu-projeto/verificando-acessibilidade-chrome.png)

## Continue aprendendo

A biblioteca Radix UI é bastante interessante. Além desse pacote com cores, ela também tem [componentes React acessíveis](https://www.radix-ui.com/docs/primitives), [ícones](https://icons.modulz.app/) e uma [biblioteca CSS-in-JS completíssima](https://stitches.dev/). Esses pacotes foram criados pela equipe por trás do [Modulz](https://www.modulz.app/), uma ferramenta de design de interfaces baseada em código com componentes reais.

Se você está procurando por mais inspiração para um sistema de cores, recomendo dar uma olhada também na ferramenta de cores do [Material UI](https://material.io/resources/color/), no [Color Hunt](https://colorhunt.co/) e [Happy Hues](https://www.happyhues.co/).


Use o sistema de cores Radix Colors para criar uma paleta bonita, funcional e acessível para seu site/aplicativo.

A paleta de cores perfeita para o seu projeto


Para criar um cubo (3D) com CSS, usaremos a propriedade `transform` para posicionar cada lado do cubo em três dimensões.

A propriedade `transform` recebe como valor algumas funções que transformam o posicionamento e a forma de um elemento com CSS.

Para criar nosso cubo, começaremos com o HTML.

```html
<div class="cube">
  <div class="face face--front">Front</div>
  <div class="face face--right">Right</div>
  <div class="face face--back">Back</div>
  <div class="face face--left">Left</div>
  <div class="face face--top">Top</div>
  <div class="face face--bottom">Bottom</div>
</div>
```

Nesse HTML temos o elemento `.cube`, que será o nosso cubo e cada uma de suas faces (`.face`).

Para melhor visualizar nosso cubo, vamos adicionar alguns estilos básicos ao elementos na página.

```css
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.face {
  background: linear-gradient(45deg, #4fd1c522, #4fd1c5cc);
  border: 2px solid #4fd1c5;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 50px;
  font-weight: bold;
  color: #234e52;
}
```

Também precisamos definir o tamanho do nosso cubo. Neste exemplo, vamos usar `200px`.

```css
.cube {
  width: 200px;
  height: 200px;
}

.face {
  /* ... */
  width: 200px;
  height: 200px;
}
```

Agora podemos começar a posicionar os elementos em três dimensões. Para deixar todas as `.face` na mesma posição inicial, usaremos `position: absolute`.

```css
.face {
  /* ... */
  position: absolute;
}
```

Todas as `.face` estão no mesmo plano, mas para criar um cubo, precisamos girá-las e posicioná-las em seu lugar. Em um cubo de 200px de largura, todas as faces estão 100px de distância do centro.

Com `transform`, podemos usar `translateX()`, `translateY()` e `translateZ()`. Essas funções mudam a posição do elemento em cada um dos três eixos X, Y e Z. Também podemos usar `rotateX()` e `rotateY()`, para girar os elementos em torno de seus eixos X e Y.

![Diagrama com a posição dos eixos X, Y e Z em um elemento em 3D](/posts/atomo-como-criar-cubo-css/eixos-3d-css.svg)

A `.face--front` será a face da frente do cubo:

```css
.face--front {
  transform: translateZ(100px);
}
```

As outras faces precisarão ser giradas para suas posições. `.face--right`, `.face--back` e `.face--left` giram em torno do seu eixo Y:

```css
.face--right {
  transform: rotateY(90deg) translateZ(100px);
}

.face--back {
  transform: rotateY(180deg) translateZ(100px);
}

.face--left {
  transform: rotateY(-90deg) translateZ(100px);
}
```

Para conseguir visualizar o que estamos construindo, vamos também aplicar uma rotação ao `.cube`, para ver as faces em perspectiva. Para preservar o posicionamento em 3D dos elementos, precisamos também usar [`transform-style: preserve-3d;`](#todo-transform-style-3d-mdn).

```css
.cube {
  /* ... */
  transform: rotateX(-20deg) rotateY(-10deg);
  transform-style: preserve-3d;
}
```

![Imagem do que criamos até o momento no post, um cubo com duas faces ainda por posicionar.](/posts/atomo-como-criar-cubo-css/cubo-semi-preparado.png)

Agora, precisamos posicionar `.face--top` e `.face--bottom`. Como elas ficarão posicionada para cima e para baixo, usaremos `rotateX()` para girá-las em torno do eixo X.

```css
.face--top {
  transform: rotateX(90deg) translateZ(100px);
}

.face--bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
```

Pronto, agora criamos um cubo com CSS.

Se você quiser adicionar um pouco de perspectiva 3D aos elementos, você pode usar `perspective: 500px` em `body`.

Com o cubo que criamos, podemos também fazer uma animação de rotação, para mostrar todas as faces do cubo. Fique à vontade para [explorar o Codepen que criei](https://codepen.io/hugobessaa/pen/xxqQMZy) para acompanhar esse post.

<iframe height="500" scrolling="no" title="Cubo (Finalizado)" src="https://codepen.io/hugobessaa/embed/xxqQMZy?height=500&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen></iframe>

## Referências

- [perspective (developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/CSS/perspective)


Usando a propriedade transform, podemos criar formas em 3D como um cubo, apenas com CSS. Aprenda como.

Como criar um cubo (3D) com CSS


A quantidade de JavaScript que precisamos para criar webapps complexos tem crescido bastante, mas o CSS também está correndo atrás de oferecer cada vez mais funcionalidades para estilização e comportamento visual.

**Scroll Snapping** é uma técnica bastante usada na web em componentes ou até sites inteiros para melhorar a experiência dos usuários. **Com `snap-scroll-type` e outras propriedades, conseguimos implementar essa técnica usando apenas CSS**.

## O básico de Scroll Snapping com CSS

Sabe aquele site com seções que tomam quase a tela inteira e que forçam a rolagem para a próxima seção? Dá para implementar essa funcionalidade com só um pouco de CSS.

```html
<section class="section section-1">Seção 1</section>
<section class="section section-2">Seção 2</section>
<section class="section section-3">Seção 3</section>
<section class="section section-4">Seção 4</section>
<section class="section section-5">Seção 5</section>
<section class="section section-6">Seção 6</section>
<section class="section section-7">Seção 7</section>
<section class="section section-8">Seção 8</section>
```

Com esse HTML, podemos definir `scroll-snap-type: y mandatory` no **contêiner de scroll** (que nesse caso é o próprio elemento `html`) e definir o lugar onde o scroll irá "grudar" com `scroll-snap-align: start`.

```css
html {
  scroll-snap-type: y mandatory;
}

/* O Safari exige a definição no body */
body {
  scroll-snap-type: y mandatory;
}

.section {
  scroll-snap-align: start;
  height: 70vh;
}

/* resto do CSS no Codepen */
```

<iframe height="600" scrolling="no" title="Scroll Snap na prática (Seções horizontais)" src="https://codepen.io/hugobessaa/embed/QWpVNLm?height=500&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen />

[Link para o Codepen](https://codepen.io/hugobessaa/pen/QWpVNLm).

A propriedade `scroll-snap-type` recebe valores que indicam a direção (`x`, `y`, `both`, etc.) e o comportamento (`mandatory` e `proximity`). Ao usar `scroll-snap-type: y mandatory`, nós estamos indicando que queremos que o scroll sempre "grude" com elementos na vertical.

Para definir os pontos de contato com os elementos que estão dentro do _contêiner de scroll_, usamos `scroll-snap-align`. Essa propriedade recebe valores como `start`, `end`, `center` e também `none`.

## Mandatory vs Proximity

Os dois tipos de comportamento do `scroll-snap-type` são `mandatory` e `proximity`.

Em `mandatory`, o navegador sempre tentará "grudar" com o elemento mais próximo. Esse é o comportamento que normalmente queremos.

Com `proximity`, o navegador só irá "grudar" com o elemento mais próximo caso ele esteja realmente próximo. A definição de "próximo" varia de acordo com o navegador. Apesar de um pouco confuso, esse comportamento de pode ser muito útil caso o usuário precise usar o scroll para ver mais conteúdo de uma seção e apenas "pular" para a próxima quando estiver perto dela.

<iframe height="600" scrolling="no" title="Scroll Snap na prática (Seções horizontais vs)" src="https://codepen.io/hugobessaa/embed/qBrMYPL?height=500&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen />

[Link para o Codepen](https://codepen.io/hugobessaa/pen/qBrMYPL).

## Scroll snapping na horizontal

Além de grandes seções na vertical, scroll snapping é bem útil em componentes menores, como uma lista horizontal. Com scroll snapping, podemos criar a mesma interação que muitos apps nativos como Netflix e App Store usam em suas listas.

<iframe height="720" scrolling="no" title="Scroll Snap na prática (Ícones de Apps)" src="https://codepen.io/hugobessaa/embed/KKWxzdB?height=500&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen />

[Link para o Codepen](https://codepen.io/hugobessaa/pen/KKWxzdB).

Neste exemplo, podemos rolar a lista horizontal e o scroll irá "grudar" em uma das caixas, impedindo que a lista fique em uma posição de scroll estranha.

Para isso, basicamente criamos um _contêiner de scroll_ horizontal, usamos `scroll-snap-type: x mandatory` e definimos o ponto de contato das caixas com `scroll-snap-align: start`.

```html
<section class="horizontal-section">
  <div class="app-icon"></div>
  <div class="app-icon"></div>
  <div class="app-icon"></div>
  <div class="app-icon"></div>
  <div class="app-icon"></div>
  <div class="app-icon"></div>
  <div class="app-icon"></div>
  <div class="app-icon"></div>
</section>
```

```css
.horizontal-section {
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}

.app-icon {
  scroll-snap-align: start;
}

/* resto do estilo no Codepen */
```

Para evitar que o scroll alinhe na borda do _contêiner_, adicionamos um `scroll-padding-left: 20px`. Assim o scroll "gruda" em uma posição que fica alinhada com outros elementos na tela e também nos deixa ver uma parte das outras caixas.

![Diagrama de como scroll-padding-left: 20px funciona](/posts/scroll-snap-na-pratica/scroll-padding.png)

A propriedade `scroll-padding` recebe os mesmo valores que `padding`. Ela é bem útil para controlar um pouco onde o scroll irá "grudar", principalmente se você tiver um elemento como um _header/menu_ fixo flutuando no topo da tela.

## Scroll Snapping em 2D (vertical e horizontal)

Não é tão comum assim termos scroll vertical e horizontal ao mesmo tempo em um elemento, mas isso não quer dizer que você não possa fazer o snapping em 2D.

Para "grudar" o scroll vertical e horizontal, é só usar `scroll-snap-type: both mandatory`. Talvez isso seja útil para quando você criar uma grande galeria de fotos.

<iframe height="600" scrolling="no" title="Scroll Snap na prática (Galeria 2D)" src="https://codepen.io/hugobessaa/embed/GRWXxXz?height=500&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen />

[Link para o Codepen](https://codepen.io/hugobessaa/pen/GRWXxXz).

## Explorando as possibilidades do `scroll-snap-align`

Além de `start` que já vimos nos exemplo acima, a propriedade `scroll-snap-align` também recebe valores como `center` e `end`. Isso muda bastante o comportamento.

Para ficar mais fácil de visualizar a diferença entre esses valores, eu criei [esse Codepen](https://codepen.io/hugobessaa/pen/bGqxKxj) demonstrando `start`, `center` e `end` lado-a-lado. Nele, temos linhas tracejadas em vermelho mostrando onde o scroll vai tentar "grudar".

<iframe height="600" scrolling="no" title="Scroll Snap na prática (Comparando align)" src="https://codepen.io/hugobessaa/embed/bGqxKxj?height=500&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen />

[Link para o Codepen](https://codepen.io/hugobessaa/pen/bGqxKxj).

Um dos valores que eu mais gosto para o `scroll-snap-align` é `center`, porque ele deixa você facilmente criar componentes como um carrossel (também conhecido como _slider_).

## Diferenças entre navegadores

O suporte dos navegadores para Scroll Snapping é [bastante bom](https://caniuse.com/css-snappoints), mais de 91% dos usuários no mundo. Apesar da especificação ser bem suportada, ela ainda é um rascunho e deve ser utilizada para progressivamente melhorar a experiência do usuário. Alguns navegadores implementam apenas parte da [especificação atual](https://drafts.csswg.org/css-scroll-snap-1).

Além disso, a especificação é subjetiva em algumas áreas, dando aos navegadores a discrição de implementar o algoritmo de snapping. Antes de aplicar Scroll Snap em seu projeto em produção, teste em diversos navegadores usados pelos seus usuários.

## Continue aprendendo

Vimos apenas uma parte do Scroll Snapping no CSS neste post. Abaixo, separei algumas referências que utilizei para criar este post e seus exemplos:

- [CSS Scroll Snap Module Level 1 (drafts.csswg.org)](https://drafts.csswg.org/css-scroll-snap-1)
- [Practical CSS Scroll Snapping(css-tricks.com)](https://css-tricks.com/practical-css-scroll-snapping/)
- [CSS Scroll Snap (developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/)
- [Basic concepts of CSS Scroll Snap (developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts)

Bons estudos!


Scroll Snap no CSS permite que você crie elementos que se posicionam automaticamente junto com o scroll. Ótimo para sliders e seções de uma página.

Scroll Snap com CSS na prática


As animações de interação dos Stories do Instagram são icônicas. Desde que o Instagram passou a perna no Snapchat e implementou essa função, parece que quase todos os outros aplicativos seguiram a tendência. **Talvez** não seja uma boa ideia adicionar Stories no dashboard da firma, mas, se precisar, **aqui vai um tutorial de como criar a animação de transição dos Stories do Instagram usando CSS**.

Interaja com [esse Codepen](https://codepen.io/hugobessaa/pen/RwpybKY) para ver como nosso projeto vai ficar no final. O que no final é um resultado bem simples, precisou de bastante investigação para chegar em uma solução menos complexa.

<iframe height="720" scrolling="no" title="Instagram Stories com CSS (do zero)" src="https://codepen.io/hugobessaa/embed/RwpybKY?height=720&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen></iframe>

Neste tutorial vamos falar sobre:

- Variáveis no CSS;
- `transform`, `rotate()` e `translate()` para transformar elementos;
- Renderizar elementos em 3D e ajustar a perspectiva com `transform-style` e `perspective`;
- Performance de animações e transições CSS;
- Funções de timing e `cubic-bezier`.

## Adicionando o HTML e CSS iniciais

Vamos começar criando [um novo Codepen](https://pen.new/), com esse HTML:

```html
<div class="container">
  <div class="screen" id="screen" tabindex="0" role="button">
    <div class="stories">
      <div class="cuboid">
        <div class="face face--front"></div>
        <div class="face face--right"></div>
      </div>
    </div>
  </div>
</div>
```

E então usar esse CSS:

```css
body {
  background: black;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
```

Nossa estrutura HTML é bastante simples. O `.container` centraliza os elementos, o `.screen` define os estilos da "tela", `.stories` contém os elementos que iremos animar, `.cuboid` é uma forma geométrica 3D e `face` são faces do cuboide com fotos.

Neste tutorial não iremos criar uma animação responsiva, já que alguns cálculos ficariam muito mais complexos. Por isso, vamos definir duas variáveis de tamanho no CSS, `--width` e `--height`.

```css
:root {
  --width: 300px;
  --height: 600px;
}
```

Com essas variáveis, agora podemos estilizar `.cuboid` e `.face`:

```css
.cuboid {
  width: var(--width);
  height: var(--height);
  position: relative;
}

.face {
  width: var(--width);
  height: var(--height);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
}
```

Cada `.face` também tem sua própria classe (`.face--front`, `.face--right`), que iremos estilizar separadamente. Vamos começar definindo as imagens de fundo (com [fotos do nosso queridíssimo Willian Justen](https://unsplash.com/@willianjusten)):

```css
.face--front {
  background: url("https://images.unsplash.com/photo-1562889858-6c5831947f72?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80");
  background-size: cover;
  background-position: center;
}

.face--right {
  background: url("https://images.unsplash.com/photo-1541447237128-f4cac6138fbe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=918&q=80");
  background-size: cover;
  background-position: center;
}
```

Com esse HTML e estilos CSS, já temos toda a base para criar a animação dos Stories do Instagram. O projeto agora está assim:

![Captura de Tela da estrutura base para criar a animação de Stories do Instagram com CSS](/posts/animacao-instagram-stories-com-css/estrutura-base.png)

## Criando as formas 3D dos elementos com `transform`

Com o que temos até aqui, não dá para fazer nossa animação. Precisamos criar o cuboide. Essa é a forma 3D que vamos girar durante a animação, para mostrar que você está indo de um Story para o outro.

![Exemplo da animação dos Stories do Instagram que queremos implementar com CSS](/posts/animacao-instagram-stories-com-css/exemplo-animacao-stories-instagram-com-css.png)

Nós podemos usar a propriedade `transform` para manipular a posição de cada elemento em 3D. Dentro dela, podemos usar algumas funções de transformação, como [`translateZ`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ) e [`rotateY`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY).

Por padrão, os elementos estão todos no mesmo plano. Isso quer dizer que eles serão renderizados em 2D, independentemente dos valores de `transform`. Para mudar isso, devemos usar [`transform-style: preserve-3d`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/transform-style).

Para criar nosso cuboide, vamos levar cada uma das faces para sua posição no campo 3D. A posição inicial do elemento `.cuboid` e suas `.face` será o centro da nossa forma geométrica 3D.

Vamos começar aplicando uma transformação no elemento `.screen` para ser mais fácil de visualizar o que estamos construindo:

```css
.screen {
  transform: rotateY(-30deg) rotateX(-10deg);
  transform-style: preserve-3d;
}
```

Agora, vamos girar a `.face--right` em 90 graus no eixo vertical para que ela fique perpendicular à `.face--front`. Como `rotateY(90deg)` gira a partir do centro do elemento, `.face--right` acaba cortando a face frontal ao meio. Para movê-la para a lateral, usaremos `transformZ()`.

```css
.face--right {
  transform: rotateY(90deg) translateZ(calc(var(--width) / 2));
  transform-style: preserve-3d;
  /* ... */
}
```

A `.face--front` já está apontando para o lado correto, mas precisamos levá-la para sua posição no eixo Z.

```css
.face--front {
  transform: translateZ(calc(var(--width) / 2));
  transform-style: preserve-3d;
  /* ... */
}
```

Nossos elementos agora estão na posição correta, mas falta um pouco de perspectiva para que `.cuboid` pareça um elemento 3D de verdade. Com CSS podemos [usar a propriedade `perspective` para definir a distância da perspectiva](#atom-adicionando-perspective-a-elementos-3d-css).

```css
.screen {
  perspective: 1600px;
  /* ... */
}
```

A diferença é notável!

![Diferença entre não usar perspective e aplicar perspective: 1600px em um elemento com CSS](/posts/animacao-instagram-stories-com-css/diferenca-perspective-css.png)

Nesse tutorial, vamos trabalhar apenas com estas duas faces, mas você já pôde começar a entender como completaríamos todas as 6 faces do cuboide.

## Animando nossos Stories

Nosso tutorial é sobre usar CSS para criar uma animação, mas vamos precisar de JavaScript para definir a interação do usuário com os Stories.

Cada vez que clicamos nos Stories, queremos mostrar o outro lado do cuboide. O código JavaScript abaixo vai adicionar a classe `screen--showing-right` ou `screen--showing-front` no elemento `.screen` cada vez que clicarmos nele.

```js
var screen = document.getElementById("screen");

screen.addEventListener("click", function () {
  if (screen.classList.contains("screen--showing-right")) {
    screen.classList.add("screen--showing-front");
    screen.classList.remove("screen--showing-right");
  } else {
    screen.classList.add("screen--showing-right");
    screen.classList.remove("screen--showing-front");
  }
});
```

Com esse código, já podemos voltar para o CSS.

Podemos definir a rotação do `.cuboid` com essas novas classes. Quando `.screen--showing-right` estiver presente, giraremos o elemento para mostrar a `.face--right`. Quando `.screen--showing-front` estiver presente, voltaremos a mostrar a `.face--front`. Para isso, só precisamos de `rotateY()`.

Para animar a transição entre rotações diferentes, basta adicionar um `transition`.

```css
.cuboid {
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 0.4s;
  /* ... */
}

.screen--showing-front .cuboid {
  transform: rotateY(0deg);
}

.screen--showing-right .cuboid {
  transform: rotateY(-90deg);
}
```

Agora, quando clicamos nos Stories eles devem girar. Vamos comentar nossa transformação em `.screen` para ver tudo de frente:

```css
.screen {
  perspective: 1600px;
  /* transform: rotateY(-30deg) rotateX(-10deg); */
  transform-style: preserve-3d;
}
```

Dá uma olhada no que construimos até agora ([link do Codepen](https://codepen.io/hugobessaa/pen/xxqJLdB)):

<iframe height="780" scrolling="no" title="Instagram Stories (parte 1)" src="https://codepen.io/hugobessaa/embed/xxqJLdB?height=780&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen></iframe>

## Ajustando a animação em "tela cheia"

Se o elemento `.screen` realmente fosse a tela de um celular, nada que estivesse além das suas bordas apareceria. Para simular isso, vamos adicionar `overflow: hidden`.

```css
.screen {
  perspective: 1600px;
  overflow: hidden;
}
```

Nosso `.cuboid` agora está cortado, já que ocupa mais do que o espaço da tela. Isso acontece porque o centro dele está no mesmo plano Z que `.screen`, mas suas faces estão além.

Para resolver isso, vamos empurrar todo o `.stories` para trás, usando um `translateZ()` negativo na mesma proporção que o `translateZ()` da `.face--front`.

```css
.stories {
  transform: translateZ(calc(var(--width) / 2 * -1));
  transform-style: preserve-3d;
}
```

Estamos cada vez mais perto da versão final dessa animação, mas ainda temos um problema. O nosso `.cuboid` está sendo cortado. Para visualizar esse problema, vamos adicionar um código de depuração:

```css
.screen {
  perspective: 1600px;
  /* overflow: hidden; */

  transform: rotateX(-40deg);
  transform-style: preserve-3d;

  position: relative;
}

.screen:before {
  content: "";
  display: block;
  width: var(--width);
  height: var(--height);
  position: absolute;
  top: 0;
  left: 0;
  transform: translateZ(1px);
  transform-style: preserve-3d;
  background: repeating-linear-gradient(
    45deg,
    #805ad544,
    #805ad544 10px,
    #805ad5bb 10px,
    #805ad5bb 20px
  );
}
```

Agora quando clicamos em `.screen`, nosso `.cuboid` gira e podemos ver que ele corta o plano Z de `.screen`.

Usando a [ferramenta de Animation do Chrome DevTools](https://triangulo.dev/posts/atomo-ferramenta-animations-devtools), podemos também diminuir a velocidade da animação para 10%.

<iframe height="720" scrolling="no" title="Instagram Stories (debug)" src="https://codepen.io/hugobessaa/embed/OJpwjgb?height=720&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen></iframe>

Isso acontece porque o elemento `.cuboid` gira em torno do seu eixo Y central.

A distância do centro de `.cuboid` para o centro de `.face--front` é a mesma distância que movemos `.stories` no eixo Z, o que fez com que `.face--front` ficasse alinhada com `.screen` (destacado em roxo no [Codepen de depuração acima](https://codepen.io/hugobessaa/pen/OJpwjgb)).

Já a distância do centro `.cuboid` para a lateral de `.face--front` é **maior**. Enquanto giramos o cuboide, uma parte dele ultrapassa `.screen` e desaparece quando usamos `overflow: hidden`.

Para resolver esse problema, **precisamos aumentar a distância de `.cuboid` para `.screen`** no eixo Z durante a transição.

Sua cabeça já deve estar um pouco cheia, tentando entender tudo isso, então vou tentar simplificar. A distância do centro do cuboide para uma de uma de suas arestas verticais é 140,7% maior do que a distância para o centro de uma de suas faces verticais.

Isso significa que precisamos nos distanciar 40,7% a mais o `.stories` de `.screen` no meio da transição e voltar para a distância original no final.

![Cuboide atravessando o elemento .screen ao ser rotacionado](/posts/animacao-instagram-stories-com-css/cuboid-atravessando-screen.svg)

Como transições no CSS não aceitam valores intermediários, precisaremos usar `animation`. Nesta animação, começaremos na distância que `.stories` já estava de `.screen`, aumentando para um valor 40,7% maior no meio da animação e terminando na distância que começamos.

```css
@keyframes translate-z-1 {
  to,
  from {
    transform: translateZ(calc(var(--width) / 2 * -1));
  }

  50% {
    transform: translateZ(calc(var(--width) / 2 * -1.407));
  }
}

@keyframes translate-z-2 {
  to,
  from {
    transform: translateZ(calc(var(--width) / 2 * -1));
  }

  50% {
    transform: translateZ(calc(var(--width) / 2 * -1.407));
  }
}
```

Não existe uma forma de recomeçar uma animação CSS no clique sem escrever mais JavaScript, então precisamos mudar entre duas similares conforme mudamos as classes de `.screen`.

Com essas animações no nosso CSS, basta usar `animation` em `.stories`:

```css
.screen--showing-front .stories {
  animation: translate-z-1 0.4s;
}

.screen--showing-right .stories {
  animation: translate-z-2 0.4s;
}
```

Quase lá.

Agora, `.cuboid` atravessa menos `.screen`, mas ainda atravessa. Além disso, no final da animação `.cuboid` parece se afastar mais do que deveria da tela.

![Story ainda atravessando .screen](/posts/animacao-instagram-stories-com-css/story-ainda-atravessando-screen.png)

Lá vamos nós de novo para a trigonometria. Por padrão, os valores das propriedades durante a animação mudam de acordo com o que chamamos de **função de timing**. Com uma função de timing podemos alterar a mudança para ser linear, suave, abrupta ou seguir curvas de diferentes funções matemáticas.

Se não definirmos a [`animation-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function), ela será `ease`. Além das funções pré-definidas (`ease`, `ease-in-out`, `steps()`), podemos usar `cubic-bezier()` para definir a curva dos valores.

Fique a vontade para explorar [`cubic-bezier()` no MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Cubic_Bezier_Generator) e entender como funciona.

A distância que precisamos nos afastar de `.screen` muda no ritmo de uma curva de função de seno. Lembra de seno? Bom, deve ser suficiente para você saber que podemos expressar essa curva com ` cubic-bezier(0.37, 0, 0.63, 1)` (retirado de [easings.net](https://easings.net/#easeInOutSine)).

Então, vamos adicionar essa função de timing em todas as nossas animações e transições:

```css
.screen--showing-front .stories {
  animation: translate-z-1 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.screen--showing-right .stories {
  animation: translate-z-2 0.4s cubic-bezier(0.37, 0, 0.63, 1);
}

.cuboid {
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.37, 0, 0.63, 1);

  width: var(--width);
  height: var(--height);
  position: relative;
}
```

**Essa foi a última lição de trigonometria deste post**.

Dá uma olhada no que construimos até agora, [neste Codepen](https://codepen.io/hugobessaa/pen/wvJxqPd):

<iframe height="720" scrolling="no" title="Instagram Stories (parte 2)" src="https://codepen.io/hugobessaa/embed/wvJxqPd?height=720&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen></iframe>

## Toques finais para uma animação de Stories perfeita

A nossa animação agora está praticamente perfeita. Vamos remover o código de `.stories:before` e simplificar os estilos de `.screen`:

```css
.screen {
  perspective: 1600px;
  overflow: hidden;
}
```

O toque que precisamos é escurecer as `.face` que não estarão mais de frente durante a transição. Faremos isso com `opacity`.

```css
.face {
  /* ...  */
  transition: opacity 0.4s;
}

.screen--showing-right .face--front {
  opacity: 0.5;
}

.screen--showing-front .face--right {
  opacity: 0.5;
}
```

Para finalizar, vamos esconder a parte de tras das `.face` durante a transição

```css
.face {
  /* ...  */
  backface-visibility: hidden;
}
```

Pronto! Nossa animação está completa.

## Animação Stories completa e o que aprendemos até aqui

Sem mais delongas, aqui está o Codepen com a animação completa do Stories do Instagram feita _quase só_ com CSS.

<iframe height="720" scrolling="no" title="Instagram Stories com CSS (do zero)" src="https://codepen.io/hugobessaa/embed/RwpybKY?height=720&theme-id=dark&default-tab=result" frameBorder="no" loading="lazy" allowtransparency="true" allowFullScreen></iframe>

Para chegar até aqui, precisamos aprender sobre:

- Eixos de transformação do `translate()` e `rotate()`;
- Elementos em 3D com `transform-style: preserve-3d` e `perspective`;
- Animações e transições;
- Funções de Timing;
- `backface-visibility`.

Com esse conhecimento, podemos usar um pouco de JavaScript para transformar esse protótipo em um componente real em uma webapp, ou ir mais além e criar novas interações em 3D em nossos projetos.

Como animamos apenas `transform` e `opacity`, essas animações rodam muito bem em quase todos os dispositivos.

Se você quiser continuar aprendendo sobre animações, recomendo outros dois posts aqui do Triângulo:

- [Criando animações perfeitas com CSS animation e transition](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css)
- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)

Bons estudos.


Siga este tutorial para criar a animação dos Stories do Instagram com CSS, incluindo dicas para criar elementos 3D com CSS.

Animação dos Stories do Instagram com CSS


A **Ferramenta de Animations** do [Chrome DevTools](https://triangulo.dev/posts/atomo-chrome-developer-tools) permite debugar animações que são executadas em uma página web. Além de mostrar as animações que ocorreram, você pode fazer o replay e mudar a velocidade de todas as animações.

Para abrir a ferramenta de Rendering, clique no **Menu ...** do DevTools, **More tools**, **Animations**.

![Captura de tela (screenshot) da ferramenta de Animations do Chrome DevTools no macOS](/posts/atomo-ferramenta-animations-devtools/ferramenta-animations-devtools.png)

## Referências

- [Inspect Animations (developer.chrome.com)](https://developer.chrome.com/docs/devtools/css/animations/)

## Citações

- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)
  > Se você quiser analisar as animações, mas acha que elas estão muito rápidas, o DevTools têm também a [**ferramenta de Animations**](https://triangulo.dev/posts/atomo-ferramenta-animations-devtools) que deixa você diminuir a velocidade de todas as animações.
- [Animação dos Stories do Instagram com CSS](https://triangulo.dev/posts/animacao-instagram-stories-com-css)
  > Usando a [ferramenta de Animation do Chrome DevTools](https://triangulo.dev/posts/atomo-ferramenta-animations-devtools), podemos também diminuir a velocidade da animação para 10%.


A Ferramenta de Animations do Chrome DevTools permite debugar animações que são executadas em uma página web.

Ferramenta de Animations do Chrome DevTools


A **Ferramenta de Rendering** do [Chrome DevTools](https://triangulo.dev/posts/atomo-chrome-developer-tools) traz opções úteis para debugar a renderização de uma página na web.

Para abrir a ferramenta de Rendering, clique no **Menu ...** do DevTools, **More tools**, **Rendering**.

As ferramentas disponíveis são:

- **Paint Flashing**: destaca as áreas da página que precisaram de repaint;
- **Layout Shift Regions**: destaca as áreas da página que se deslocaram devido a [Layout Shift](https://triangulo.dev/posts/atomo-layout-shift);
- **Layer Borders**: sinaliza as bordas de camadas e tiles;
- **Frame Rendering Stats**: mostra estatísticas de renderização de frame em tempo-real, com medidor de fps e uso da GPU;
- **Scrolling Performance Issues**: destaca elementos que podem diminuir a velocidade de rolagem, includindo eventos de toque e rolagem ou outros problemas de rolagem na thread principal;
- **Highlight ad frames**: destaca frames detectados como propaganda;
- **Hit-test borders**: mostra as bordas de regiões de hit-test;
- **Core Web Vitals**: mostra métricas da Core Web Vitals sobrepostas no site;
- **Disable local fonts**: desabilita `local()` em `@font-face`;
- **Emulate a focused page**: emula uma página focada;
- **Emulate CSS media**: opções para emular `media type`, `prefers-color-scheme`, `prefers-reduced-motion` e `color-gamut`;
- **Emulate vision deficiencies**: opções para visualizar uma página como uma pessoa com deficiências visuais como visão turva e diferentes tipos de daltonismo.
- **Disable AVIF image format**: desabilita o tipo de imagem AVIF;
- **Disable WebP image format**: desabilita o tipo de imagem WebP;

![Exemplo de Paint Flashing e Frame Rendering Stats ativado](/posts/atomo-ferramenta-rendering-devtools/paint-flashing-frame-rendering-stats.gif)

## Citações

- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)
  > A primeira delas é a [ferramenta de Rendering](https://triangulo.dev/posts/atomo-ferramenta-rendering-devtools). Ela nos possibilita visualizar coisas como:


A Ferramenta de Rendering do Chrome DevTools traz opções úteis para debugar a renderização de uma página na web.

Ferramenta de Rendering do Chrome DevTools


**Layout Shift** é o deslocamento do layout do site conforme recursos são carregados ou alterações são executadas no navegador. Layout Shifts são indesejados em grande parte dos casos, já que eles podem sobrecarregar o processamento ativando cálculos de layout e paint, mas também porque representam uma má experiência para o usuário.

![Exemplo de Layout Shift](/posts/atomo-layout-shift/exemplo-de-layout-shift.png)

Causas comuns de Layout Shift são:

- Imagens sem tamanho (`width` e `height`) definidos antes de carregarem;
- Mudanças em `padding` e `margin`;
- Carregamento assíncrono de JavaScript que altera o DOM;
- Propagandas mal-aplicadas na página.

## Referências

- [Cumulative Layout Shift (web.dev)](https://web.dev/cls/)

## Citações

- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)
  > Na abertura do menu, muitos [Layout Shifts](https://triangulo.dev/posts/atomo-layout-shift) e cálculos de layout e paint.


Layout Shift é o deslocamento do layout do site conforme recursos são carregados ou alterações são executadas no navegador

Layout Shift


Uma animação lenta e desajeitada é capaz de diminuir bastante a minha percepção de valor de um site. No computador é menos comum ver animações assim, mas o que não falta são sites com animações lentas no celular.

Quando for a sua vez de implementar um site com animações perfeitas, precisamos [entender o que torna uma animação fluida](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css), mas uma parte importante do processo é saber como analisar o que está acontecendo. E para esse problema, o [DevTools do Chrome](https://triangulo.dev/posts/atomo-chrome-developer-tools) tem uma ferramenta muito útil para nós: [a aba de Performance](https://triangulo.dev/posts/atomo-aba-performance-devtools).

## A Aba de Performance do Chrome DevTools

Para acessar a aba de Performance do Chrome DevTools, basta abrir o DevTools em **Menu ...**, **Mais Ferramentas**, **Ferramentas do Desenvolvedor**, **Performance**.

![Aba de Performance do Chrome DevTools no macOS, sem relatório](/posts/analisando-performance-chrome-devtools/chrome-devtools-aba-performance-macos.png)

Quando você abre a aba de Performance, ela começa vazia. No topo, temos os controles da aba.

![Controles da Aba de Performance do Chrome DevTools no macOS, com etiquetas](/posts/analisando-performance-chrome-devtools/chrome-devtools-aba-performance-macos-controles.png)

A aba de Performance não serve apenas para medir a performance de animações, mas também para analisar problemas de memória, rede e web vitals.

## Analisando um Relatório de Performance de Animação do DevTools

Neste post, vamos analisar um [Codepen](https://codepen.io/hugobessaa/pen/WNpjYgG) simples que criei. Nele temos uma lista de _tweets_ e um menu. No _hover_, os tweets fazem uma animação de mudança de tamanho e de cor. Ao clicar no botão "Menu", um menu lateral é animado da direita para a esquerda e o conteúdo da página fica mais escuro.

Por ser um exemplo simples e contido, a performance das animações não deve ser ruim, mesmo que o código tenha vários problemas de performance. Para nossos próximos testes, vou rodar o Codepen em um **Pixel 3a** e [debugar remotamente pelo USB](https://triangulo.dev/posts/atomo-debugar-chrome-do-android-devtools) utilizando o [CPU Throttling da aba de Performance](https://triangulo.dev/posts/atomo-cpu-throttling-chrome-devtools).

Para abrir apenas o conteúdo do Codepen no celular, sem a interface e os editores de texto:

1. Abra o **[Codepen](https://codepen.io/hugobessaa/pen/WNpjYgG)** que criamos;
2. Clique em **Change View**;
3. Selecione **Debug mode**;
4. Abra o link no seu celular.

Com o Codepen aberto no celular e o DevTools remoto aberto, eu iniciei uma gravação e interagi com os _tweets_ e o _menu_. De cara, podemos perceber alguns problemas marcados em vermelho.

O relatório do DevTool é dividido em algumas seções. A **Timeline** traz um resumo do relatório que foi gravado. Em **Frames**, temos capturas de tela dos frames renderizados durante a gravação. Em **Experience**, vemos alertas de problemas na experiência do usuário. Na seção **Main** temos um gráfico com todas as tarefas executadas na thread principal do navegador. Na parte inferior, **Summary** mostra um resumo dos tipos de tarefa executados e o total de tempo que elas ocuparam. Estas são as seções que vamos explorar neste post.

![Seções da Aba de Performance do Devtools do Chrome](/posts/analisando-performance-chrome-devtools/secoes-aba-performance-chrome-devtools.png)

Em Frames podemos ver alguns frames ficaram preenchidos com vermelho durante a gravação. Eles apontam para frames que demoraram para renderizar e foram descartados ("_dropped_"). **Cada frame [precisa ser renderizado em até 16ms se quisermos uma animação perfeita](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css)**, mas estamos desviando disso agora.

Para conseguir analisar de perto o que aconteceu para os frames serem descartados, basta clicar na região e usar o scroll do seu mouse/trackpad para navegar pelos frames.

Na seção **Main**, cada _task_ é detalhada. Embaixo da _task_, temos as partes do fluxo de renderização. A _task_ da imagem abaixo levou 23.73ms para terminar, o que acabou fazendo com que o frame fosse descartado.

![Relatório da Aba de Performance do DevTools do Chrome com um frame descartado](/posts/analisando-performance-chrome-devtools/relatorio-performance-devtools-nao-otimizado-frame-descartado.png)

Nossa animação está lenta. No _hover_ dos _tweets_, alteramos o `padding` dos elementos, iniciando computações de layout. Na abertura do menu, muitos [Layout Shifts](https://triangulo.dev/posts/atomo-layout-shift) e cálculos de layout e paint. Alguns frames demoraram 31ms para serem renderizados, diminuindo nossa animação a até 32fps em alguns momentos.

Se clicarmos no problema de Layout Shift na seção Experience, podemos ver um resumo do que aconteceu e até qual nó do DOM foi responsável por esse problema.

**Agora, o que podemos fazer para melhorar?** Basta colocar em prática o que aprendemos em [Criando animações perfeitas com CSS animation e transition](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css).

Neste post não vou cobrir cada mudança que fiz no Codepen para melhorar a performance da animação. Faço isso de propósito, pois quero que você aprenda a fazer por conta própria. A dica que vou dar é que **evitar as fases de Layout e Paint é bastante importante para melhorar a performance de animações CSS**.

Se você ainda não aprendeu a fazer estas melhorias, [siga estas instruções para modificar o nosso Codepen](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css#sua-vez-de-deixar-uma-animação-css-perfeita).

### Analisando nossas mudanças

Vamos analisar agora um [Codepen com animações fluídas](https://codepen.io/hugobessaa/pen/GRWvZYy), otimizado. O visual das animações é praticamente idêntico, mas eu alterei as animações para fazerem **melhor uso da fase de Composite**.

Mesmo os frames que renderizaram duas ou três animações ao mesmo tempo, tiveram suas tasks na casa dos 10ms. O tempo que cada task leva ainda está alto, mas vale lembrar que estamos testando em um Pixel 3a com CPU Throttling em 4x.

![Relatório da Aba de Performance do DevTools do Chrome depois de aplicar otimizações](/posts/analisando-performance-chrome-devtools/relatorio-performance-devtools-otimizado.png)

No Codepen otimizado, as tarefas das fases de Layout e Paint ocuparam uma fração do tempo quando comparadas com as do Codepen não-otimizado. Depois da otimização nós não só temos uma computação mais rápida nessas fases, nós também evitamos que elas sejam necessárias para a maior parte dos elementos na tela.

## Visualizando problemas de Paint e Layout Shift

Além da aba de Performance, o DevTools do Chrome também possui algumas outras ferramentas que podem nos ajudar a debugar animações CSS.

A primeira delas é a [ferramenta de Rendering](https://triangulo.dev/posts/atomo-ferramenta-rendering-devtools). Ela nos possibilita visualizar coisas como:

- **Paint Flashing**: áreas que precisaram de uma fase de Paint, em verde;
- **Layout Shift Regions**: regiões que sofreram com Layout Shift, em azul;
- **Frame Rendering Stats**: estatísticas de renderizacão de frames e memória da GPU.

Para visualizar como o primeiro Codepen não-otimizado estava sendo renderizado, vamos habilitar Paint Flashing, Layout Shift Regions na ferramenta de Rendering e interagir com a página.

![Animação da visualização de Paint Flashing e Layout Shift Regions do Codepen não-otimizado](/posts/analisando-performance-chrome-devtools/gif-rendering-paint-layout-shift-nao-otimizado.gif)

Nossa interação com os _tweets_ mostra o problema de animar com `padding` logo de cara: todos os outros _tweets_ visíveis precisaram de uma fase de Paint durante toda a animação.

Já com o menu, o problema é maior. Quando abrimos o menu, ele passa por Paint várias vezes durante a animação o elemento que escurece o conteúdo principal também demanda Paint a cada frame.

Com as mudanças que eu fiz, o que vemos no [Codepen otimizado](https://codepen.io/hugobessaa/pen/GRWvZYy) é totalmente diferente. No _hover_ apenas o _tweet_ que interagimos passa pela fase de Paint e na abertura do menu os elementos são renderizados poucas vezes.

![Animação da visualização de Paint Flashing e Layout Shift Regions do Codepen otimizado](/posts/analisando-performance-chrome-devtools/gif-rendering-paint-layout-shift-otimizado.gif)

Se você quiser analisar as animações, mas acha que elas estão muito rápidas, o DevTools têm também a [**ferramenta de Animations**](https://triangulo.dev/posts/atomo-ferramenta-animations-devtools) que deixa você diminuir a velocidade de todas as animações.

![25% de velocidade na ferramentas de Animations](/posts/analisando-performance-chrome-devtools/animations-em-25-por-cento.png)

## Continue aprendendo

A aba de Performance e outras ferramentas do DevTools do Chrome são muito úteis para debugarmos animações CSS. Elas nos dão um caminho para entendermos o que está acontecendo por baixo dos panos.

Nem sempre o relatório será suficiente para solucionarmos nossos problemas de performance. Na verdade, o mais importante é entender como criar animações fluídas em primeiro lugar. Explore o [Codepen não-otimizado](https://codepen.io/hugobessaa/pen/WNpjYgG) e o [Codepen otimizado](https://codepen.io/hugobessaa/pen/GRWvZYy) usando que o que aprendeu neste post para ganhar experiência e criar animações cada vez melhores.

O pessoal do Chrome também escreveu [uma referência muito completa sobre a aba de Performance](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/) que aborda cada uma das partes desta ferramenta em mais detalhes.


Aprenda a utilizar a aba de Performance do DevTools para encontrar problemas na performance das suas animações CSS

Analisando a Performance de Animações CSS com o DevTools


A **Aba de Performance** do Chrome DevTools permite que você crie relatórios para analisar vários aspectos do seu site, como:

- Performance de renderização da página;
- Problemas de Layout Shift e Layout Thrashing;
- Utilização de memória para analisar memory leaks;
- Utilização da rede durante a gravação do relatório;
- Métricas do Web Vitals.

![Captura de Tela (screenshot) da aba de Performance do Chrome Developer Tools (Ferramentas do Desenvolvedor) em um computador macOS](/posts/atomo-aba-performance-devtools/performance-chrome-devtools.png)

Para acessar a aba de Performance, basta abrir o DevTools em **Menu ...**, **Mais Ferramentas**, **Ferramentas do Desenvolvedor**, e clicar na aba **Performance**.

## Referências

- [Chrome DevTools - Analyze runtime performance (developers.chrome.com)](https://developer.chrome.com/docs/devtools/evaluate-performance/)

## Backlinks

- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)
  > [...] E para esse problema, o [DevTools do Chrome](https://triangulo.dev/posts/atomo-chrome-developer-tools) tem uma ferramenta muito útil para nós: [a aba de Performance](https://triangulo.dev/posts/atomo-aba-performance-devtools).
- [Configurando o CPU Throttling no Chrome DevTools](https://triangulo.dev/posts/atomo-cpu-throttling-chrome-devtools)
  > [...] Para simular dispositivos com menos capacidade de processamento, use a funcionalidade de **CPU Throttling** da [aba de Performance do Chrome DevTools](https://triangulo.dev/posts/atomo-aba-performance-devtools).


A aba de Performance do Chrome DevTools permite que você crie relatórios para analisar vários aspectos do seu site.

Aba de Performance do Chrome DevTools


A **Chrome Developer Tools**, ou **Ferramentas do Desenvolvedor**, é um painel do navegador Chrome que conta com diversas ferramentas úteis para desenvolvedores web explorarem diversos aspectos de uma página/aplicativo web.

![Captura de Tela (screenshot) do Chrome Developer Tools (Ferramentas do Desenvolvedor) em um computador macOS](/posts/atomo-chrome-developer-tools/chrome-developer-tools-screenshot.png)

Algumas das ferramentas disponíveis são:

- **Inspetor** de elementos no DOM
- **Console** JavaScript
- **Aba de Network** para monitoramento da rede
- **Aba de Performance** para análise de relatórios de performance de renderização
- **Aba de Application** com ferramentas para verificar informações da webapp, dados armazenados, cache e serviços em segundo-plano

## Referências

- [Chrome DevTools - Overview (developer.chrome.com)](https://developer.chrome.com/docs/devtools/overview/)

## Backlinks

- [Criando animações perfeitas com CSS animation e transition](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css)
  > O Chrome possui uma incrível ferramenta que pode nos ajudar a entender todo o fluxo de renderização e o que acontece durante animações. Essa ferramenta está disponível no [Chrome Developer Tools (DevTools)](https://triangulo.dev/posts/atomo-chrome-developer-tools), na aba **Performance**.
- [Ferramenta de Rendering do Chrome DevTools](https://triangulo.dev/posts/atomo-ferramenta-rendering-devtools)
  > A **Ferramenta de Rendering** do [Chrome DevTools](https://triangulo.dev/posts/atomo-chrome-developer-tools) traz opções úteis para debugar a renderização de uma página na web.
- [Ferramenta de Animations do Chrome DevTools](https://triangulo.dev/posts/atomo-ferramenta-animations-devtools)
  > A **Ferramenta de Animations** do [Chrome DevTools](https://triangulo.dev/posts/atomo-chrome-developer-tools) permite debugar animações que são executadas em uma página web. Além de mostrar as animações que ocorreram, você pode fazer o replay e mudar a velocidade de todas as animações.


A Chrome Developer Tools, ou Ferramentas do Desenvolvedor, é um painel do navegador Chrome que conta com diversas ferramentas úteis para desenvolvedores

Chrome Developer Tools (Ferramentas do Desenvolvedor)


Seu computador nem sempre tem a performance parecida com os dispositivos que usarão em produção o site ou webapp que você está desenvolvendo. Para simular dispositivos com menos capacidade de processamento, use a funcionalidade de **CPU Throttling** da [aba de Performance do Chrome DevTools](https://triangulo.dev/posts/atomo-aba-performance-devtools).

Para acessar a aba de Performance, basta abrir o DevTools em **Menu ...**, **Mais Ferramentas**, **Ferramentas do Desenvolvedor**, e clicar na aba **Performance**. Lá, clique na **Engrenagem de Configurações** e defina o **CPU Throttling**.

![Captura de tela (screenshot) da aba de performance selecionando as opções de CPU Throttling](/posts/atomo-cpu-throttling-chrome-devtools/performance-chrome-devtools-cpu-throttling.png)

## Referências

- [Chrome DevTools - Analyze runtime performance (developers.chrome.com)](https://developer.chrome.com/docs/devtools/evaluate-performance/)

## Backlinks

- [Criando animações perfeitas com CSS animation e transition](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css)
  > Teste o exemplo em um celular Android [debugando pelo Chrome DevTools](https://triangulo.dev/posts/atomo-debugar-chrome-do-android-devtools).
- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)
  > [...] Para nossos próximos testes, vou rodar o Codepen em um **Pixel 3a** e [debugar remotamente pelo USB](https://triangulo.dev/posts/atomo-debugar-chrome-do-android-devtools) utilizando o [CPU Throttling da aba de Performance](https://triangulo.dev/posts/atomo-cpu-throttling-chrome-devtools)


Simule dispositivos com menos capacidade de processamento com o CPU Throttling do Chrome DevTools

Configurando o CPU Throttling no Chrome DevTools


A partir do Chrome no seu computador, **você pode debugar um site aberto em um dispositivo Android** utilizando o [Chrome DevTools](https://triangulo.dev/posts/atomo-chrome-developer-tools). Para isso:

1. Primeiro, habilite o as Opções de Desenvolvedor no seu Android;
1. Vá até as opções em **Configurações**, **Sistema**, **Opções do Desenvolvedor**;
1. Ative a Depuração USB;
1. No seu computador, abra o Chrome;
1. Acesse `chrome://inspect#devices`;
1. Habilite a opção de "Discover USB devices";
1. Conecte o seu dispositivo Android ao seu computador por um cabo USB;
1. Você deve agora conseguir ver o seu celular na lista de dispositivos;
   ![Captura de tela (screenshot) da página de inspeção remota do Chrome DevTools](/posts/atomo-debugar-chrome-do-android-devtools/screenshot-inspecao-remota-android-devtools.png)
1. Se o seu dispositivo aparecer como offline, permita a depuração USB no Android;
1. Você pode agora clicar em "inspect" em alguma das abas listadas.

## Referências

- [Chrome DevTools - Remote debug Android devices (developers.chrome.com)](https://developer.chrome.com/docs/devtools/remote-debugging/)

## Backlinks

- [Criando animações perfeitas com CSS animation e transition](https://triangulo.dev/posts/criando-animacoes-perfeitas-com-css)
  > Teste o exemplo em um celular Android [debugando pelo Chrome DevTools](https://triangulo.dev/posts/atomo-debugar-chrome-do-android-devtools).
- [Analisando a Performance de Animações CSS com o DevTools](https://triangulo.dev/posts/analisando-performance-chrome-devtools)
  > [...] Para nossos próximos testes, vou rodar o Codepen em um **Pixel 3a** e [debugar remotamente pelo USB](https://triangulo.dev/posts/atomo-debugar-chrome-do-android-devtools) utilizando o [CPU Throttling da aba de Performance](https://triangulo.dev/posts/atomo-cpu-throttling-chrome-devtools)


A partir do Chrome no seu computador, você pode debugar um site aberto em um dispositivo Android utilizando o Chrome DevTools.

Como debugar o Chrome no Android usando o DevTools


Animações perfeitas dão aquele toque elegante em um site, não é mesmo? Você toca em um botão, um movimento suave acontece; abre o menu, uma transição perfeita te leva para outro contexto. Desde que o CSS3 virou algo suportado pelos navegadores mais utilizados, a web tem ótimas ferramentas para criar animações (`animation`) e transições (`transition`). Mesmo que essas ferramentas já estejam entre a gente por um tempão, ainda é difícil criar interfaces de usuário com movimentos perfeitos.

Nossos olhos são muito bons em perceber movimento e nossa cabeça é muito boa em sinalizar quando algo não está funcionando do jeito certo. Como a maior parte das nossas telas é capaz de reproduzir 60 _frames_ por segundo (fps), nós estamos muito acostumados a ver essa taxa de atualização em todos os movimentos que acontecem em interfaces de usuário. Para nossas animações serem perfeitas, elas precisam se encaixar nessa taxa de atualização. Vamos entender o porquê.

## O que faz uma animação ou transição ser perfeita?

Em uma tela que atualiza sua imagem a uma taxa de 60fps, o navegador precisa calcular onde cada elemento do seu site aparecerá na tela a cada frame. **Para ser perfeita, o movimento da sua animação precisa acontecer a cada 16ms** (1000 milissegundos / 60 frames = 16,66). Isso significa que, nesses 16ms, o navegador precisa executar seu código, verificar qualquer mudança na posição de todos os elementos e calcular onde eles estarão.

![Exemplo de animação a 60 frames por segundo](/posts/criando-animacoes-perfeitas-com-css/exemplo-de-animacao-a-60-quadros-por-segundo.png)

Para sites que não mudam a posição de seus elementos, o navegador consegue evitar trabalho e calcular apenas uma vez onde cada pedaço estará. Quando acionamos animações, o navegador precisa calcular a posição dos nossos elementos a cada frame — a cada intervalo de 16ms. **Entender esse processo de computação e renderização é essencial para criar animações e transições perfeitas com CSS** usando `animation` e `transition`.

Toda vez que o cálculo para renderizar o novo frame de uma animação dura mais do que o tempo para atualizar a tela, nós "perdemos frames". Isso significa que um frame deixou de ser renderizado. **A perda de frames é o que tira a fluidez de uma animação** e traz uma experiência ruim para o usuário.

![Exemplo de quando um frame com 25ms é perdido](/posts/criando-animacoes-perfeitas-com-css/exemplo-frame-perdido-com-25-ms.png)

## Fluxo de renderização do navegador

Todos os navegadores atuais (Chrome, Firefox, Safari, Edge) adotam um fluxo de renderização parecido. Esse fluxo (_rendering pipeline_, em inglês) é [divido em quatro fases](https://web.dev/animations-overview/):

1. **Style**: Na primeira fase, o navegador calcula quais serão os valores de cada propriedade CSS de cada elemento da tela.
1. **Layout**: Com os valores em mãos, calcula-se a disposição de todos os elementos na tela.
1. **Paint**: O navegador agora cria instruções de renderização de todos os elementos dividos em cada camadas.
1. **Composite**: Por fim, compõe todas as camadas na tela.

Como todo esse processo precisa se encaixar em 16ms durante uma animação para que ela não "engasgue", todos os navegadores modernos possuem otimizações para passar a menor quantidade de tempo em cada fase ou até pulá-las. Para criar animações performáticas precisamos evitar trabalho.

![Fluxo de renderização de um navegador. Style, Layout, Paint, Composite](/posts/criando-animacoes-perfeitas-com-css/fluxo-de-renderizacao-de-um-navegador.png)

Na **fase Style**, o navegador basicamente calcula qual é o estilo a ser computado para cada elemento na página, cada nó do DOM. Por não envolver computação pesada, esta fase geralmente é bem rápida e não representa um problema de performance.

## Como evitar trabalho durante uma animação CSS

Após saber o estilo a ser aplicado em cada elemento, o navegador pode iniciar a **fase de Layout**. Nela será calculada a disposição de cada elemento e a ordem em que eles serão renderizados na página. Em sites com árvores do DOM muito grandes, a fase de Layout pode demorar um tempo considerável e prejudicar a taxa de frames por segundo em uma animação.

Existem várias propriedades CSS que, quando mudadas, podem levar o navegador a iniciar a fase de Layout. `width`, `height`, `padding` e `margin` são algumas delas que tendemos a animar com mais frequência. Como uma mudança em um elemento no meio da página pode afetar a disposição de toda a página, animar essas propriedades pode gerar um grande trabalho a cada frame. Se possível, evite animar essas propriedades.

A fase de Layout gera uma representação da página em uma **Árvore de Layout**.

![Exemplo de uma Árvore de Layout criada a partir de um site](/posts/criando-animacoes-perfeitas-com-css/arvore-de-layout.png)

Após calcular o posicionamento dos elementos, o navegador iniciará a **fase de Paint**. Aqui, o navegador calcula em que ordem todos os elementos devem ser renderizados, camada por camada, gerando uma representação dos comandos necessários para mostrar o que o usuário verá na tela. **A Árvore de Layout é transformada em Registros de Paint**.

![Exemplo de uma Árvore de Layout transformada em registros de paint](/posts/criando-animacoes-perfeitas-com-css/registros-de-paint.png)

Esta fase pode demandar bastante recurso, então o navegador tenta ao máximo diminuir a área da tela que precisa ser computada. Caso nenhum elemento tenha mudado sua aparência na tela, a fase de Paint será pulada.

As propriedades que geralmente animamos que sempre demandam uma fase de Paint são as que controlam posicionamento (`top`, `left`, `right`, `bottom`), tamanho (`width`, `height`, `padding`, `margin`) e cor (`background`, `color`).

## Criando animações de alta-performance com Composite Layers

Após a fase de Layout, **o navegador precisa transformar os Registros de Paint em pixels**. Este processo se chama de _rasterização_ e ocorre durante a **fase Composite** (presente na grande maioria dos navegadores atuais).

Nesta fase, o navegador _rasteriza_ diferentes camadas da interface de usuário e usa a GPU para compor estas camadas e tirar um pouco do peso do cálculo da CPU.

![Exemplo da rasterização de cada camada](/posts/criando-animacoes-perfeitas-com-css/rasterizacao.png)

Para otimizar o uso de recursos do seu computador, o Chrome rasteriza não só a parte que você está vendo na tela, mas boa parte dos elementos da página. E, em vez de criar apenas uma imagem com a composição dos elementos, o Chrome divide certos elementos e camadas diferentes, permitindo que a composição final seja feita na GPU.

Como os cálculos da fase Composite rodam na thread de Composition e não influenciam na performance da thread principal, animações que usam a fase Composite são muito mais performáticas do que as que dependem das fases de Layout e Paint. Isto se deve a evitar a frequente e pesada _rasterização_ de camadas sem necessidade.

![Exemplos de camadas rasterizadas](/posts/criando-animacoes-perfeitas-com-css/camadas-rasterizadas.png)

Se não devemos animar `width` ou `margin` e é bom evitar mudanças em `background` e `top`, o que usar então? Que bom que você perguntou.

As propriedades que, quando animadas, geram camadas que serão usadas na fase Composite são:

- `opacity`
- `transform: scale()`
- `transform: translate()`
- `transform: rotate()`
- `transform: skew()`
- `transform: matrix()`

![Exemplos de animação com transform: translate3d(20px, 20px, 0)](/posts/criando-animacoes-perfeitas-com-css/animacao-com-transform-translate3d.png)

Na minha experiência, elas são mais do que suficientes para boa parte das animações que criamos para melhorar a experiência do usuário.

Boa parte dos computadores e celulares têm GPUs boas o suficiente para criarmos animações bastante complexas com `opacity` e `transform`.

## Visualizando/debugando animações e o fluxo de renderização do navegador

O Chrome possui uma incrível ferramenta que pode nos ajudar a entender todo o fluxo de renderização e o que acontece durante animações. Essa ferramenta está disponível no [Chrome Developer Tools (DevTools)](/posts/atomo-chrome-developer-tools), na aba **Performance**.

Ao clicar no botão de gravação, o DevTools irá guardar dados de tudo que está acontecendo na tela e por baixo dos panos no fluxo de renderização. Assim que você parar de gravar, a ferramenta ficará recheada de informações para explorarmos:

- Linha do tempo com principais eventos e gráficos;
- Frames e seu tempo de renderização;
- Tarefas na thread Principal;
- Várias outras informações sobre a rede, uso da GPU, rasterização, etc.

![Aba de Performance do DevTools do Chrome com um relatório de performance do site da Tesla](/posts/criando-animacoes-perfeitas-com-css/aba-performance-devtools-chrome.png)

Para aprender um pouco mais sobre a aba Performance do DevTools, vamos visitar um site bastante bonito que possui animações sutis, mas que fazem toda a diferença durante a navegação: tesla.com.

Na [página do Model Y](https://tesla.com/modely), animações são iniciadas conforme rolamos a página para ver mais conteúdo. Ao gravar essa interação no meu computador, pude perceber algumas animações com problemas e outras perfeitas.

O interessante deste relatório da aba Performance é que podemos ir mais fundo nestes problemas e tentar entendê-lo, mesmo sem conhecer o código-fonte do site.

A linha do tempo no topo do relatório mostra alguns retângulos vermelhos. Ao focar nestes frames com problemas, podemos ver que um deles demorou cerca de 146ms para ser renderizado — um número muito acima do ideal de 16ms.

![Frame longo na página do Model Y no site da Tesla](/posts/criando-animacoes-perfeitas-com-css/frame-longo-no-site-da-tesla.png)

Nas informações da thread principal, podemos ver que a fase de Style ocupou sozinha 52ms. Ela veio logo após uma chamada método `scrollTo` no JavaScript. Este método gera **Layout Trashing**, o que força o recálculo dos estilos de todos os elementos no DOM e cálculos da fase de Layout.

![Frame longo na página do Model Y no site da Tesla](/posts/criando-animacoes-perfeitas-com-css/frame-longo-recalculate-style-site-da-tesla.png)

Depois dessa parte mais pesada na performance, as animações são bem mais leves e performáticas. No quadro abaixo, podemos explorar o quão rápidas animações podem ser quando fazem uso de camadas na fase Composite.

![Frame curto de uma animação usando Composite Layers](/posts/criando-animacoes-perfeitas-com-css/frame-curto-usando-composite-layers.png)

Neste caso, foram **apenas 42 microssegundos necessários para a fase Composite** e 2,72 milissegundos para todo o frame.

## A (má) influência do JavaScript em animações CSS

Não é só o CSS que influencia no fluxo de renderização e na performance das animações CSS. Código JavaScript também pode influenciar nessas animações, como vimos no exemplo do site da Tesla.

Como as fases de Style, Layout e Paint são executadas na thread principal do navegador, qualquer outro código JavaScript que estiver sendo executado ao mesmo tempo vai tomar espaço dentro do fluxo de renderização.

Além disso, alguns métodos e propriedades no JavaScript afetam diretamente o fluxo de renderização. Esses métodos e propriedades geram o que chamamos de **Layout Thrashing**. Usar `element.getBoundingClientRect()`, por exemplo, obriga o navegador a recalcular os estilos do elemento e passar pela fase de Layout para gerar o resultado da chamada deste método.

```js
button.addEventListener("click", (event) => {
  // A chamada deste método gera Layout Thrasing
  console.log(button.getBoundingClientRect());
});
```

A lista de métodos e propriedades que geram Layout Thrashing é bem extensa e difere um pouco entre diferentes navegadores. O Paul Irish criou o documento [What forces layout / reflow](https://gist.github.com/paulirish/5d52fb081b3570c81e3a) que conta com uma lista completa do que você deve evitar.

Alguns deles são:

- Geometria dos elementos: `elem.offsetLeft`, `elem.clientLeft`, `elem.getClientRects()`
- Scroll (rolagem): `elem.scrollBy()`, `elem.scrollTo()`, `elem.scrollTop`
- Dimensões de window: `window.scrollX`, `window.scrollY`
- Foco: `elem.focus()`

O Google também documenta a boa prática de evitar Layout Thrashing no artigo [Avoid Large, Complex Layouts and Layout Thrashing](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?utm_source=devtools#avoid-forced-synchronous-layouts), que detalha bem algumas coisas que você deve evitar fazer durante animações, como loops que calculam e mudam o tamanho de vários elementos em sequência.

## Sua vez de deixar uma animação CSS perfeita

Agora que você conhece todo o fluxo de renderização do navegador, nós podemos criar uma animação CSS perfeita.

E qual a melhor forma de fazer isso? Consertando uma imperfeita, é claro.

No [Codepen abaixo](https://codepen.io/hugobessaa/pen/ExWgyJK), temos uma interface bem simples com um conteúdo principal e um menu lateral. No conteúdo principal, temos uma lista de tweets com uma animação de _hover_ e um botão para abrir e fechar o menu. Ao ser aberto, o menu lateral é animado e desliza da esquerda para a direita, enquanto deixa o conteúdo principal mais escuro.

<iframe height="500" style="width: 100%;" scrolling="no" title="CSS Animation - &quot;Imperfeito&quot;" src="https://codepen.io/hugobessaa/embed/preview/ExWgyJK?height=500&theme-id=dark&default-tab=html,result" frameborder="no" loading="lazy">
  See the Pen <a href='https://codepen.io/hugobessaa/pen/ExWgyJK'>CSS Animation - &quot;Imperfeito&quot;</a> by Hugo
  (<a href='https://codepen.io/hugobessaa'>@hugobessaa</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

Dependendo do seu computador, você poderá perceber os problemas de performance nestas animações visualmente.

Caso a animação esteja rodando bem no seu computador, teste algumas coisas:

- Utilize a funcionalidade de [CPU Throttling](https://umaar.com/dev-tips/88-cpu-throttling/);
- Clique no botão "Ligar computação pesada" para simular carga na sua CPU e na thread principal da página;
- Teste o exemplo em um celular Android [debugando pelo Chrome DevTools](https://triangulo.dev/posts/atomo-debugar-chrome-do-android-devtools).

Agora é a **sua vez** de _forkar_ esse [Codepen](https://codepen.io/hugobessaa/pen/ExWgyJK) e modificar o código para deixar a animação mais otimizada. Como quero que você aprenda na prática, o código não está documentado. Use o DevTools de Performance para explorar os problemas e utilize o seu conhecimento sobre o fluxo de renderização.

## Continue aprendendo

Ainda não cobrimos tudo sobre animações no CSS. Aqui vão algumas referências e ferramentas para continuar estudando:

- [Inside look at modern web browser (part 3)](https://developers.google.com/web/updates/2018/09/inside-browser-part3): a principal referência deste post;
- [High Performance Animations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/);
- [10 principles for smooth web animations](https://blog.gyrosco.pe/smooth-css-animations-7d8ffc2c1d29);
- [Chrome Developers: Inspect Animations](https://developer.chrome.com/docs/devtools/css/animations/);
- [CSS GPU Animation: Doing It Right](https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/);
- [Pixels are expensive](https://aerotwist.com/blog/pixels-are-expensive/);
- [CSS Triggers](https://csstriggers.com/): lista com propriedades CSS e quais fases de renderização elas ativam em cada navegador quando alteradas;
- [The Applied Science of Runtime Performance - Chrome Dev Summit 2014 (Paul Lewis)](https://www.youtube.com/watch?v=RCFQu0hK6bU);
- [Braces to Pixels](https://alistapart.com/article/braces-to-pixels/);
- [Eliminate content repaints with the new Layers panel in Chrome](https://blog.logrocket.com/eliminate-content-repaints-with-the-new-layers-panel-in-chrome-e2c306d4d752/?gi=cd6271834cea);
- Treine seu conhecimento e analise a performance do site [https://gyrosco.pe/](https://gyrosco.pe/).


Mergulhe fundo em como criar e debugar animações CSS perfeitas, entendendo o fluxo de renderização dos navegadores.

Criando animações perfeitas com CSS animation e transition


Quais são as ferramentas que mais usamos como pessoas desenvolvedoras front-end? Foi pra responder essa pergunta que organizei uma sala no 👋 Clubhouse, com Isadora Stangarlin (do [@papodedev](https://instagram.com/papodedev)) e [Eder Christian](https://instagram.com/ederchristian92). Toda a conversa que tivemos ao vivo foi muito interessante e me fez gastar uma página inteira do caderno só com os nomes das ferramentas citadas.

No Clubhouse as pessoas que estão ouvindo ao vivo podem pedir para participar e falar. Por causa disso, várias pessoas compartilharam suas ferramentas favoritas durante nossa uma hora de conversa.

Como toda pessoa desenvolvedora, usamos um editor de texto ou IDE para escrever boa parte do nosso código. O VS Code foi uma presença unânime como o editor favorito de todo mundo que estava na sala. Acho que não sobra muita dúvida sobre o porquê. Quase todo mundo da sala programava em JavaScript e o VS Code tem muitas ferramentas úteis para essa linguagem. Se me perguntassem no começo de 2020 qual era meu editor de texto favorito, com certeza falaria o Vim. Depois de 5 anos como meu editor padrão, troquei o Vim pelo VS Code quando comecei a programar em TypeScript — simplesmente não dá para ignorar que o VS Code é o melhor editor gratuito para trabalhar em projetos escritos com TypeScript.

Além de falar de editores de texto, também compartilhamos os navegadores que usamos, extensões na web, extensões do VS Code, aplicativos e sites favoritos. Aqui vai uma lista de todas as ferramentas que citamos na conversa:

[Hugo Bessa](https://instagram.com/triangulo_dev):

- [Chrome](https://www.google.com/intl/pt-BR/chrome/): navegador
- [Vimium](https://chrome.google.com/webstore/detail/vimium/dbepggeogbaibhgnhhndojpepiihcmeb): extensão do Chrome que te deixa navegar pelo site sem utilizar o mouse, com atalhos inspirados pelo Vim
- [VS Code](https://code.visualstudio.com/): editor
- [vim-mode](https://github.com/VSCodeVim/Vim): extensão para emular o Vim dentro do VS Code
- [Figma](https://www.figma.com/): aplicativo gratuito de criação de designs com ferramentas de colaboração em tempo real
- [Codepen](https://codepen.io/): site para prototipação rápida com HTML, JS e CSS
- [Codesandbox](https://codesandbox.io/): editor completo online com ferramentas de execução de código sem instalar nada no seu computador
- [Browsersync](https://browsersync.io/): ferramenta de linha de comando que sincroniza a navegação em um site entre vários dispositivos
- [Dev.to](https://dev.to/): site artigos sobre programação

[Isadora Stangarlin](https://instagram.com/papodedev):

- [Chrome](https://www.google.com/intl/pt-BR/chrome/): navegador
- [VS Code](https://code.visualstudio.com/): editor
- [ColorPick](https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg): extensão do Chrome para copiar a cor de qualquer elemento de um site
- [Clear Cache](https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=pt): extensão do Chrome para limpar todo o cache de um site
- [Cssmatic](http://www.cssmatic.com/): ferramentas para CSS
- [daily.dev](https://chrome.google.com/webstore/detail/dailydev-news-for-busy-de/jlmpjdjjbgclbocgajdjefcidcncaied): extensão do Chrome que te mostra novidades da área de TI na tela de nova aba
- [Medium](https://medium.com/): site com muitos artigos sobre desenvolvimento
- [Panda](https://usepanda.com/): agregador de conteúdo
- [Udemy](https://www.udemy.com/pt/): plataforma de cursos

[Eder Christian](https://instagram.com/ederchristian92):

- [VS Code](https://code.visualstudio.com/): editor
- [Smashing Magazine](https://www.smashingmagazine.com/): site com ótimos artigos sobre programação, principalmente front-end
- [Vercel.app](https://vercel.app/): serviço para deploy de projetos front-end, ótimo para usar com Next.js
- [Frontend Masters](https://frontendmasters.com/): plataforma de cursos

[João Deroldo](https://instagram.com/joaoderoldo)

- [Emmet](https://code.visualstudio.com/docs/editor/emmet): extensão para escrever HTML rápido

[Daniel Filho](https://twitter.com/danielfilho)

- [Firefox](https://www.mozilla.org/pt-BR/firefox/): navegador
- [Multi Account Container](https://addons.mozilla.org/pt-BR/firefox/addon/multi-account-containers/): extensão do Firefox para isolar cookies e cache de sites
- [Envify](https://addons.mozilla.org/pt-BR/firefox/addon/envify/): extensão do Firefox para colorir o navegador baseado na URL (útil para diferenciar ambientes de desenvolvimento e producão)
- [VS Code](https://code.visualstudio.com/): editor
- [Live Share](https://visualstudio.microsoft.com/pt-br/services/live-share/): extensão do VS Code para fazer paired programming dentro do VS Code
- [All about Next.js](https://www.udemy.com/course/all-about-nextjs/): curso sobre o framework Next.js

[Lucas Viana](https://instagram.com/mechamobau):

- [colorhunt.co](https://colorhunt.co/): site para descobrir paletas de cores
- [getwaves.io](https://getwaves.io/): site para criar "ondas" em SVG, para usar como divisor de seções

[Andre Benatti](https://instagram.com/dotpegaso)

- [mobbin.design](https://mobbin.design/): coleções de inspirações para designs
- [Undesign](https://undesign.learn.uno/): ferramentas para design
- [Photopea](https://www.photopea.com/): site "Photoshop online"
- [uppbeat.io](https://uppbeat.io/): site com músicas sem DRM para utilizar em vídeos ou podcasts

[Násser Yousef](https://instagram.com/nasser.yousefali)

- [animaapp.com](https://www.animaapp.com/): plugin para transformar designs em código e protótipos responsivos
- [animista.net](https://animista.net/): site para criar animações CSS com uma ferramenta visual

Eu não conhecia muitas das ferramentas que o pessoal recomendou nessa conversa no Clubhouse. Dá uma olhada em cada uma e não se esqueça de ver também o perfil no Instagram/Twitter de quem contribuiu. Faltou alguma que você usa muito? [Manda pra mim](https://instagram.com/triangulo_dev).


Extensões, aplicativos, editores, sites e navegadores que desenvolvedores front-end recomendam para facilitar nosso dia-a-dia

Ferramentas Essenciais no Front-end - Undefined #2


Alguns dos métodos do Array já são bastante conhecidos por quem trabalha com JavaScript. Um deles é o `.map`, que tanto usamos para transformar valores em um Array. Entretanto, existem alguns métodos que eu quase nunca vi as pessoas usando, mesmo quando eles seriam perfeitos para o problema que elas estavam tentando resolver.

## `.some`

O método `.some` serve para você verificar se uma condição é verdadeira para pelo menos um valor dentro do Array – um caso de uso bastante comum. O `.some` recebe uma função `callbackFn` que deve testar cada um dos elementos do Array. A `callbackFn` recebe três argumentos:

- `element`: o valor do elemento;
- `index`: o índice deste elemento no Array;
- `array`: o Array sendo testado.

O valor retornado pela `callbackFn` deve ser _convertível_ para `true` ou `false` através da [coerção de tipos](https://developer.mozilla.org/en-US/docs/Glossary/Type_coercion).

Para mostrar um exemplo de como usar o método `.some`, criaremos um Array `fruits` e as funções `isApple` e `isKiwi` que testarão se um elemento é uma maçã ou um kiwi.

```js
let fruits = [🍎, 🍏, 🍌, 🍊, 🥥];

function isApple(fruit) {
  return fruit === 🍎;
}

function isKiwi(fruit) {
  return fruit === 🥝;
}
```

Podemos então usar o método `.some` no Array `fruits`, passando como `callbackFn` uma das duas funções que criamos. Esta chamada retornará `true` se as funções retornarem `true` para pelo menos um dos elementos em `fruits`.

```js
fruits.some(isApple); // => true
fruits.some(isKiwi); // => false
```

## `.every`

Parecido com o `.some`, o `.every` é usado para verificar se uma condição é verdadeira para todos os elementos de um Array. Esse método também recebe uma função `callbackFn`, com os mesmo argumentos `element`, `index` e `array`.

No exemplo a seguir, criaremos um Array de objetos com dados sobre pessoas e os testaremos com funções que verificam se os dados delas atendem à uma condição.

```js
let people = [
  { name: "João", age: 20 },
  { name: "Maria", age: 18 },
  { name: "Lucas", age: 22 },
];

function isOverAge(person) {
  return person.age >= 18;
}

function isMaria(person) {
  return person.name === "Maria";
}
```

A função `isOverAge` testará se `person.age` é maior do que `18`. Como esta condição é verdadeira para todos os elementos do Array, o método `.every` retornará `true` com essa condição.

```js
people.every(isOverAge); // => true
```

Já a função `isMaria` testará se `person.name` é `'Maria'`, o que não é verdadeiro para todos os elementos do Array `people`. A chamada do método `.every`, neste caso, retornará `false`.

```js
people.every(isMaria); // => false
```

## `.flat`

Algumas vezes temos um Array que tem outros Arrays dentro dele e precisamos transformar todos esses elementos em um grande Array com apenas um nível de profundidade. O método `.flat` faz exatamente isso. Ele recebe um único argumento opcional `depth`, que pode ser utilizado para configurar o nível de profundidade de sub-Arrays que devem ser concatenados em um único nível.

```js
let arrays = [1, 2, 3, [4, 5], [6, 7, [8, 9]]];

arrays.flat(); // => [1, 2, 3, 4, 5, 6, 7, [8, 9]]
arrays.flat(2); // => [1, 2, 3, 4, 5, 6, 7, 8, 9]
```

Como por padrão `depth` é igual a `1`, a primeira chamada ainda retorna um array com um sub-array. Em casos em que você não tem ideia do nível de profundidade dos sub-arrays mas quer ter certeza que todos os elementos estarão em apenas um único nível, você pode passar `Infinity` como argumento para o método `.flat()`.

```js
let arrays = [[[[[[[[[[[1, 2, 3]], [[[[[[4]]]]]]]]]]]]]]];

arrays.flat(Infinity); // => [1, 2, 3, 4]
```

## `.flatMap`

Um dos casos de uso mais comuns para o método `.flat` é utilizá-lo logo após uma chamada ao `.map` que gerou sub-arrays. Podemos utilizar como exemplo exemplo listar todos os amigos (`.friends`) de todas as pessoas (`person`) em um Array.

```js
let people = [
  { name: "João", friends: [{ name: "Gabriel" }, { name: "Laura" }] },
  { name: "Maria", friends: [{ name: "Bruna" }, { name: "Luiza" }] },
  { name: "Rebeca", friends: [{ name: "Gustavo" }] },
];
```

Se usarmos apenas o método `.map` com uma função para retornar todos os amigos de cada uma das pessoas, teríamos um Array com sub-arrays.

```js
function getFriends(person) {
  return person.friends;
}

people.map(getFriends);
/* =>
[
  [{name: 'Gabriel'}, {name: 'Laura'}}],
  [{name: 'Bruna'}, {name: 'Luiza}],
  [{name: 'Gustavo}]
]
*/
```

Já com o método `.flatMap`, este Array retornado pela função `getFriends` será concatenado com os resultados anteriores, retornando um Array com apenas um nível de profundidade.

```js
people.flatMap(getFriends);
/* =>
[
  {name: 'Gabriel'},
  {name: 'Laura'}},
  {name: 'Bruna'},
  {name: 'Luiza},
  {name: 'Gustavo}
]
*/
```

Vale alertar que, ao contrário do método `.flat`, não é possível controlar a profundidade de sub-arrays que serão concatenados em apenas um nível. O método `.flatMap` concatenará elementos em apenas um nível de profundidade.

## `.concat`

Eu sinceramente não sei porquê poucas pessoas utilizam o `.concat`, mas se precisasse apostar seria por causa da grande quantidade de exemplos que vemos utilizando o operador de `spread` (`...`) para juntar elementos de diferentes Arrays em um só.

O método `.concat` pode ser utilizado para concatenar diferentes itens em um único Array. Ele recebe como argumento um ou mais itens que podem tanto ser valores quanto outros Arrays e retorna um novo Array com todos esses itens concatenados.

```js
[1].concat(2); //         => [1, 2]
[1].concat(2, 3); //      => [1, 2, 3]
[1].concat([2, 3]); //    => [1, 2, 3]
[1].concat(2, [3, 4]); // => [1, 2, 3, 4]
```

Sempre que você precisar verificar se um valor é ou não um Array antes de utilizar um operador `spread`, considere usar o método `.concat`.

```js
let item = 3;
[1, 2, ...(Array.isArray(item) ? item : [item])]; // ❌
[1, 2].concat(item); // ✅
```

Como o método `.concat` funciona tanto em valores como em Arrays, também podemos implementar uma função que se comporta como o método `.flat` facilmente:

```js
function flat(array, nestedArray) {
  return array.concat(...nestedArray);
}

flat([1, 2], [3, [4, 5]]); // => [1, 2, 3, 4, 5]
```

No exemplo acima, utilizamos o operador `spread` para usar cada um dos elementos de `nestedArray` como argumentos para a chamada do método `.concat`.

## Continue aprendendo

A classe Array tem muitos métodos úteis para facilitar a sua vida no JavaScript enquanto estiver trabalhando com Arrays. Quando utilizamos métodos como `.some` e `.every`, mostramos muito mais a intenção de um código do que quando os implementamos com loops `for` ou outros métodos mais genéricos como o `.reduce`. Para aprender mais sobre outros métodos disponíveis na classe Array, não deixe de visitar a [referência completa no MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) ou a própria [especificação oficial da classe Array](https://tc39.es/ecma262/#sec-properties-of-the-array-prototype-object).

Se você transforma muitos Arrays no seu código JavaScript e já acha que os métodos da classe Array nem sempre são suficientes, vale a pena usar bibliotecas como o [Lodash](https://lodash.com/).


A classe Array possue muitos métodos que podem facilitar muito a vida de quem trabalha com JavaScript, mas nem todo mundo usa alguns dos seus métodos como .some ou .every.

5 métodos do Array no JS que você deveria usar mais

Hoje usamos CSS para estilizar layouts muito diferentes do que imaginávamos na época que a web foi criada. De tabelas para divs, de floats para Flexbox, as ferramentas disponíveis para criarmos layouts na web evoluíram muito desde os anos 90. Agora, CSS Grid já é suportado em todos os navegadores mais atuais e podemos dizer com segurança que esse é o método de layout mais poderoso que já foi adicionado ao CSS.

O CSS Grid, ao contrário da maioria das outras técnicas para construir layouts, foi criado especificamente para possibilitar os layouts em duas dimensões (2D) que queremos implementar em nossos sites. Juntando cada uma das novas propriedades adicionadas ao CSS, podemos escrever um código de estilos muito claro e intencional. Além disso, os novos conceitos adicionados nos permitem implementar alguns layouts bastante complexos sem perdermos a cabeça ou usarmos vários hacks.

Para criar um contêiner grid, basta usar `display: grid`. Em um contêiner grid, todos os seus filhos diretos se tornam itens grid. Com um contêiner grid em mãos podemos começar a criar layouts usando colunas e linhas.

Neste primeiro exemplo, criaremos uma `div` com a classe `container` com seis elementos dentro.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
  <div>Cinco</div>
  <div>Seis</div>
</div>
```

Usando `display: grid`, transformaremos esta `div` em um contêiner grid.

```css
.container {
  display: grid;
}
```

Agora, cada um dos seis elementos que estão dentro do nosso contêiner são itens grid. Por padrão, temos apenas uma coluna, acompanhada de linhas criadas automaticamente para cada elemento. Nada muito diferente do que veríamos em uma `div` normal.

![Grid com valores padrão](/posts/css-grid-o-que-voce-precisa-saber/grid-com-valores-padrao.png)

## Trabalhando com colunas usando grid-template-columns

Para criar colunas, usaremos a propriedade `grid-template-columns`, que recebe os valores de tamanho de cada coluna separados por espaço. Podemos, por exemplo, criar duas colunas com `200px` cada.

```css
.container {
  display: grid;
  grid-template-columns: 200px 200px;
}
```

Agora, todos os nossos elementos estarão distribuídos entre duas colunas de um tamanho fixo. Usando `grid-template-columns` podemos implementar muitos outros layouts, misturando diferentes valores de tamanho.

![Contêiner grid com grid-template-columns: 200px 200px](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-200-200.png)

Podemos, por exemplo, criar um layout em que a primeira coluna ocupa um espaço fixo e a segunda ocupa todo o resto do espaço disponível. Isto é possível usando a unidade `fr`, introduzida exatamente para ser utilizada como valor de tamanho para linhas e colunas em contêineres grid.

```css
.container {
  display: grid;
  width: 500px;
  grid-template-columns: 150px 1fr;
}
```

![Contêiner grid com grid-template-columns: 150px 1fr](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-150-1fr.png)

A unidade `fr` representa uma **fr**ação do espaço livre disponível em uma linha ou coluna. Podemos misturar diversos valores `fr` para formar layouts automáticos que respeitam certas proporções.

```css
.container {
  display: grid;
  width: 500px;
  grid-template-columns: 2fr 1fr;
}
```

No exemplo acima, todo o espaço disponível será dividido entre duas colunas: a primeira terá o tamanho de 2/3 o espaço total disponível e a segunda 1/3.

![Contêiner grid com `grid-template-columns: 2fr 1fr`](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-2fr-1fr.png)

## Criando linhas com CSS Grid (grid-template-rows)

Até agora trabalhamos apenas com colunas. Mas o real poder do CSS Grid se mostra quando usamos linhas e colunas em conjunto.

Para definir linhas no CSS Grid podemos usar a propriedade `grid-template-rows`. Da mesma forma que declaramos colunas com `grid-template-columns`, declararemos linhas usando valores separados por espaço.

```css
.container {
  display: grid;
  height: 300px;
  grid-template-rows: 3fr 1fr 3fr;
}
```

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>
```

Dentro do nosso contêiner grid agora teremos 3 linhas declaradas com os valores de `3fr`, `1fr` e `3fr`. Assim como nossas colunas, o tamanho das linhas que acabamos de criar no nosso contêiner grid preenchem o espaço disponível proporcionalmente.

Juntando `grid-template-columns` com `grid-template-rows`, criaremos nosso primeiro contêiner grid em duas dimensões.

```css
.container {
  display: grid;
  width: 500px;
  height: 300px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 50px 1fr;
}
```

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
  <div>Cinco</div>
  <div>Seis</div>
</div>
```

![Contêiner grid com duas colunas e três linhas](/posts/css-grid-o-que-voce-precisa-saber/grid-template-columns-rows.png)

Agora temos a combinação de duas colunas de tamanhos `2fr` e `1fr` com três linhas de tamanhos `1fr`, `100px` e `1fr`. Com apenas três declarações CSS, conseguimos criar um layout altamente flexível e bastante difícil de replicar com qualquer outra técnica CSS. **É na combinação de colunas, linhas e tamanhos flexíveis que CSS Grid se destaca de tudo o que já existiu** e põe na mão das pessoas que desenvolvem um poder imenso para criar layouts.

## Adicionando espaço entre itens grid com gap

Mas… e se quiséssemos adicionar um espaço entre todas essas linhas e colunas? Normalmente conhecido como “gutter”, esse espaço pode ser declarado usando a propriedade `gap`.

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 100px 1fr;
  gap: 20px;
}
```

`gap` é uma forma abreviada de declarar os valores de `column-gap` (que define o espaço entre colunas) e `row-gap` (que define o espaço entre linhas). Para declarar valores diferentes podemos adicionar um segundo valor de tamanho (`gap: 10px 20px`) ou então escrever `column-gap` e `row-gap` separadamente.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 100px 2fr;

  gap: 10px 20px;
  /* ou então */
  column-gap: 10px;
  row-gap: 20px;
}
```

![Contêiner grid com `gap: 10px 20px;`](/posts/css-grid-o-que-voce-precisa-saber/gap-10px-20px.png)

Usando apenas essas três propriedades, podemos implementar uma quantidade gigantesca de interfaces de usuário que antes envolveriam muito mais trabalho manual.

# Explorando a grid implícita com grid-auto-rows e grid-auto-columns

Nem sempre todo o conteúdo de um contêiner grid será previsível. E se tivéssemos uma lista dinâmica? Começaremos vendo o que acontece quando temos mais itens do que o nosso conjunto de linhas e colunas comporta.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
  <div>Quatro</div>
  <div>Cinco</div>
  <div>Seis</div>

  
  <div>Sete</div>
  <div>Oito</div>
  <div>Nove</div>
</div>
```

```css
.container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 100px 1fr;
  gap: 10px;
}
```

![Elementos "Sete", "Oito" e "Nove" na grid implícita](/posts/css-grid-o-que-voce-precisa-saber/grid-implicita.png)

Os elementos “Sete”, “Oito” e “Nove” continuam organizados em colunas como os anteriores, mas eles já não seguem as mesmas regras para o tamanho das linhas. Isso acontece porque quando temos mais elementos do que células no nosso contêiner grid, os elementos que sobram criam novas células implícitas que ocupam as colunas disponíveis e criam novas linhas que não tinham sido declaradas.

O DevTools (ferramentas de desenvolvimento) do Firefox nos permite ver exatamente o que está acontecendo por baixo dos panos.

![Firefox DevTools com grid implícita](/posts/css-grid-o-que-voce-precisa-saber/grid-implicita-firefox.png)

As linhas representam a parte explícita do nosso grid. O tracejado representa a parte implícita, criada automaticamente para comportar o excesso de elementos.

Assim como temos `grid-template-columns` e `grid-template-rows` para controlar o grid explícito, podemos usar `grid-auto-columns` e `grid-auto-rows` para definir como o nosso grid implícito será disposto.

```css
.container {
  display: grid;
  gap: 10px;

  /* grid explícito */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 100px 100px 100px;

  /* grid implícito */
  grid-auto-rows: 50px;
}
```

Com o uso de `grid-auto-rows: 50px` definimos agora que todas as novas linhas terão `50px` de tamanho. A propriedade `grid-auto-rows` aceita muito mais do que apenas um valor. Se adicionarmos outros valores separados por espaço à essa declaração, podemos controlar de forma intercalada o tamanho de nossas linhas implícitas.

```css
.container {
  display: grid;
  gap: 10px;

  /* grid explícito */
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 80px 80px 80px;

  /* grid implícito */
  grid-auto-rows: 50px 80px;
}
```

![Grid implícita `grid-auto-rows: 50px 80px`](/posts/css-grid-o-que-voce-precisa-saber/grid-auto-rows-50-80.png)

## Definindo a direção do fluxo de um contêiner grid com grid-auto-flow

Por padrão, cada elemento em um contêiner grid automaticamente cria um nova linha. Então um contêiner grid com três elementos dentro dele teria uma coluna e três linhas.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>
```

```css
.container {
  display: grid;
}
```

Como não declaramos nenhuma coluna ou linha com `grid-template-columns` ou `grid-template-rows`, toda a grid será implícita.

Cada elemento no nosso grid cria uma nova linha. Para mudar este comportamento e criar colunas, basta usar `grid-auto-flow: column`.

```html
<div class="container">
  <div>Um</div>
  <div>Dois</div>
  <div>Três</div>
</div>
```

```css
.container {
  display: grid;
  grid-auto-flow: column;
}
```

![Contêiner grid com `grid-auto-flow: column`](/posts/css-grid-o-que-voce-precisa-saber/grid-auto-flow-row.png)

Juntando `grid-auto-flow`, `grid-auto-columns` e `grid-auto-rows`, podemos criar layouts automáticos que guiam o conteúdo dinâmico para seguir um padrão que definimos. Um dos [três hábitos para escrever CSS escalável](https://triangulo.dev/posts/tres-habitos-css-escalavel) é deixar o conteúdo fluir para acomodar mudanças que nem sempre conseguimos prever enquanto estamos desenvolvendo.

## Continue aprendendo

O CSS Grid é uma ferramenta muito poderosa para criar layouts em duas dimensões. Neste artigo exploramos apenas uma pequena parte de todas as suas capacidades. Ainda faltou cobrir propriedades de alinhamento e distribuição de itens grid, formas de criar layouts responsivos com colunas e linhas automáticas, áreas, sobreposição de elementos e muito mais. Não deixe de conferir o [Basic Concepts of grid layout (developer.mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) para um tour completo pelas funcionalidades do CSS Grid ou o excelente [Complete Guide to Grid (css-tricks.com)](https://css-tricks.com/snippets/css/complete-guide-grid/).

Nosso Guia de Estudos CSS também conta com uma [seção dedicada para o CSS Grid](https://trello.com/c/Vf40uwRL/13-css-grid). Bons estudos!

CSS Grid é a ferramenta mais poderosa para criar layouts com CSS. Aprenda como utilizá-la com exemplos práticos e visuais.

CSS Grid: o básico que você precisa saber (com exemplos)


O Flexbox é um dos módulos do CSS criados para facilitar a vida de quem precisa criar layouts na web. Com ele é possível controlar o tamanho, alinhamento e distribuição de um contêiner e seus elementos-filhos (chamados de itens). Esse conjunto de ferramentas torna o Flexbox extremamente capaz de resolver problemas de layout em uma dimensão.

Antes do Flexbox era bastante comum ouvir uma história de alguém que não conseguiu centralizar um elemento com CSS, já que as ferramentas de layout padrão (`block` e `inline`) não lidam muito bem com o alinhamento e distribuição de elementos. Outro problema bastante comum era não conseguir facilmente tornar o tamanho de um elemento flexível, já que a única forma de fazer isso era usando unidades em porcentagem e fazendo cálculos manuais com elas.

Este post de introdução vai te mostrar os principais conceitos por trás desse poderoso módulo do CSS e como utilizá-lo para estilizar seus projetos na web. Vamos começar criando um contêiner _flex_.

## Índice

- [Criando um contêiner _flex_](#criando-um-contêiner-flex)
- [Alinhando elementos com Flexbox](#alinhando-elementos-com-flexbox)
  - [Usando a propriedade `justify-content`](#usando-a-propriedade-justify-content)
  - [Alinhando elementos com a propriedade `align-items`](#alinhando-elementos-com-a-propriedade-align-items)
  - [Alinhando o conteúdo no Flexbox com `align-content`](#alinhando-o-conteúdo-no-flexbox-com-align-content)
  - [Usando `align-self` para alinhar elementos dentro de um contêiner flex](#usando-align-self-para-alinhar-elementos-dentro-de-um-contêiner-flex)
- [Quebrando o conteúdo em novas linhas ou colunas](#quebrando-o-conteúdo-em-novas-linhas-ou-colunas)
- [Definindo tamanhos flexíveis para os elementos _flex_](#definindo-tamanhos-flexíveis-para-os-elementos-flex)
  - [A propriedade `flex-grow`](#a-propriedade-flex-grow)
  - [A propriedade `flex-shrink`](#a-propriedade-flex-shrink)
  - [Controlando o tamanho de elementos com `flex-basis`](#controlando-o-tamanho-de-elementos-com-flex-basis)
- [Ordenando elementos-filhos de um contêiner _flex_](#ordenando-elementos-filhos-de-um-contêiner-flex)
- [Suporte em diferentes navegadores](#suporte-em-diferentes-navegadores)

## Criando um contêiner _flex_

Para criar um contêiner _flex_, você precisa apenas utilizar `display: flex` em um elemento.

```css
.elemento {
  display: flex;
}
```

Ao aplicar a regra `display: flex`, o elemento se tornará um contêiner _flex_ e seus elementos-filhos serão do tipo _flex_. Do lado de fora, um contêiner _flex_ não é diferente de um outro elemento _block_, mas o comportamento de seus elementos-filhos é completamente modificado.

**Dica:** Isso pode ser explicado na especificação [Display Module Level 3](https://www.w3.org/TR/css-display-3/), que diz que a propriedade `display` especifica dois tipos de _display_: o externo e o interno. Usar `display: flex` é, então, a forma curta de `display: block flex`, que define o display do contêiner em si como `block` e de seus elementos-filhos como `flex`.

## Alinhando elementos com Flexbox

A partir do momento que você tem um contêiner _flex_, seus elementos serão dispostos ao longo do **eixo principal**, formando uma linha. Usando a propriedade `flex-direction`, podemos trocar a direção do eixo principal com `flex-direction: column`, onde o elementos formarão uma coluna. O padrão para esta propriedade é `flex-direction: row`.

```css
.container-row {
  display: flex;
  flex-direction: row; /* o eixo principal será uma linha */
}

.container-column {
  display: flex;
  flex-direction: column; /* o eixo principal será uma coluna */
}
```

![Conteiner flex e seus
eixos](/posts/introducao-flexbox/conteiner-flex.png)

A propriedade `flex-direction` recebe também valores que inverterão a ordem de disposição dos elementos de um contêiner _flex_: `row-reverse` e `column-reverse`.

![flex-direction com valores row, row-reversed, column e column-reversed](/posts/introducao-flexbox/flex-direction.png)

Para alinhar os elementos ao longo dos dois eixos, utilizamos três propriedades de alinhamento: `justify-content`, `align-items` e `align-content`.

### Usando a propriedade `justify-content`

A propriedade `justify-content` define o alinhamento do conteúdo do contêiner _flex_ ao longo de seu eixo principal. Cada um de seus possíveis valores afetará o alinhamento de todo o conteúdo, resolvendo o antigo problema de centralizar elementos ou distribuí-los de forma igual.

Seu valor padrão é `flex-start`, que define que o conteúdo será alinhado a partir do começo do eixo principal.

![Ilustração com exemplo de justify-content: flex-start](/posts/introducao-flexbox/justify-content-flex-start.png)

O valor `flex-end` define que o conteúdo será alinhado a partir do final do eixo principal.

![Ilustração com exemplo de justify-content flex-end](/posts/introducao-flexbox/justify-content-flex-end.png)

Usando `center`, o conteúdo será alinhado ao centro do eixo principal.

![Ilustração com exemplo de justify-content center](/posts/introducao-flexbox/justify-content-center.png)

Um outro valor bastante útil é o `space-between`, que alinha o conteúdo ao longo do eixo principal e adiciona um espaço padrão entre todos os elementos.

![Ilustração com exemplo de justify-content space-between](/posts/introducao-flexbox/justify-content-space-between.png)

Já o `space-around` adiciona um espaço ao redor de todos os elementos.

![Ilustração com exemplo de justify-content space-around](/posts/introducao-flexbox/justify-content-space-around.png)

Parecido com o `space-around`, o `space-evenly` adiciona um espaço ao redor de todos os elementos de forma igual, incluindo os das pontas.

![Ilustração com exemplo de justify-content space-evenly](/posts/introducao-flexbox/justify-content-space-evenly.png)

Existem também [outros valores para `justify-content`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/justify-content) que não cobriremos neste artigo: `start`, `end`, `left` e `right`.

### Alinhando elementos com a propriedade `align-items`

Para alinharmos elementos ao longo do eixo transversal de um contêiner _flex_, usamos a propriedade `align-items`. Os seus valores principais são: `stretch`, `flex-start`, `flex-end`, `center`, e `baseline`.

`stretch` é o valor padrão para `align-items`. Traduzindo para português, "_stretch_" significa "esticar". Então, por padrão, os elementos serão esticados para ocupar todo o espaço disponível no eixo transversal. Isso é muito útil quando queremos que todos os elementos tenham o mesmo tamanho quando o conteúdo interno deles é diferente.

![Ilustração com exemplo de align-items stretch](/posts/introducao-flexbox/align-items-stretch.png)

Com `flex-start`, todos os elementos do contêiner _flex_ se alinharão a partir do início do eixo transversal.

![Ilustração com exemplo de align-items flex-start](/posts/introducao-flexbox/align-items-flex-start.png)

Já o `flex-end` definirá que os elementos se alinhem a partir do final do eixo transversal.

![Ilustração com exemplo de align-items flex-end](/posts/introducao-flexbox/align-items-flex-end.png)

Usando o valor `center`, todos os elementos serão alinhados a partir do centro do eixo transversal.

![Ilustração com exemplo de align-items center](/posts/introducao-flexbox/align-items-center.png)

O valor `baseline` distribuirá os elementos de certa forma que seus _baselines_ se alinhem ao longo do eixo transversal.

![Ilustração com exemplo de align-items baseline](/posts/introducao-flexbox/align-items-baseline.png)

Neste artigo não cobriremos alguns dos [outros valores possíveis para `align-items`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-items) como: `start`, `self-start`, `end`, `self-end`, e os modificadores `safe` e `unsafe`.

### Alinhando o conteúdo no Flexbox com `align-content`

Ao invés de alinhar os elementos, é possível também alinhar todo o conteúdo de um contêiner _flex_ no eixo transversal. A propriedade `align-content` é menos utilizada que a `align-items`, mas muito útil em situações em que o contêiner _flex_ tem um tamanho pré-definido (`100vh` por exemplo) e não sabemos com antecedência o tamanho de todos os elementos-filhos.

O valor padrão para esta propriedade é `normal`, que funciona como se nenhum valor tivesse sido definido.

Com `flex-start`, o conteúdo será alinhado ao início do eixo transversal. Já `flex-end` alinhará o conteúdo do contêiner _flex_ ao final. Usando `center`, o conteúdo será alinhado ao centro.

![Ilustração com exemplo de align-content flex-start, flex-end e center](/posts/introducao-flexbox/align-content-flex-start-end-center.png)

Também podemos utilizar o valor `space-between` para adicionar espaçamento entre as linhas de conteúdo, `space-around` para espaçamento ao redor destas linhas e `space-evenly` para espaçamento igual ao redor das linhas de conteúdo incluindo as pontas.

![Ilustração com exemplo de align-content space-between, space-around e space-evenly](/posts/introducao-flexbox/align-content-space.png)

O valor `stretch` fará com que as linhas de conteúdo se estiquem para tomar todo o espaço disponível no eixo transversal.

![Ilustração com exemplo de align-content stretch](/posts/introducao-flexbox/align-content-stretch.png)

Neste artigo não cobriremos alguns dos [outros valores possíveis para `align-content`](https://developer.mozilla.org/pt-BR/docs/Web/CSS/align-content) como: `start`, `end` e os modificadores `safe` e `unsafe`.

### Usando `align-self` para alinhar elementos dentro de um contêiner flex

Podemos também utilizar `align-self` em elementos _flex_ para alterar seu alinhamento no eixo transversal de forma independente.

![Ilustração com exemplo de align-self](/posts/introducao-flexbox/align-self.png)

A propriedade `align-self` recebe os mesmos valores que `align-items` ou `align-content`.

## Quebrando o conteúdo em novas linhas ou colunas

Por padrão, os elementos-filhos de um contêiner _flex_ serão dispostos ao longo dos eixos, sem quebrarem em novas linhas e colunas. Para controlar este comportamento, podemos utilizar a propriedade `flex-wrap`.

O valor padrão para esta propriedade é `nowrap`, que define que os elementos serão dispostos em uma única linha.

`wrap` definirá que os elementos irão ocupar novas linhas, em direção ao fim do eixo transversal.

Já o valor `wrap-reverse` especifica que os elementos irão ocupar novas linhas em direção ao início do eixo transversal

![Ilustração com exemplo de flex-wrap](/posts/introducao-flexbox/flex-wrap.png)

## Definindo tamanhos flexíveis para os elementos _flex_

Além de ferramentas para distribuir e alinhar elementos-filhos em um contêiner _flex_, o Flexbox também tem propriedades para auxiliar na definição do tamanho de elementos. Assim como o nome deixa a entender, o forte dessas propriedades é poder escolher valores flexíveis. Com `flex-grow`, `flex-shrink` e `flex-basis` aplicados a um elemento-filho _flex_, podemos controlar o seu tamanho dentro um contêiner _flex_ e como ele lida com a sobra ou falta de espaço.

### A propriedade `flex-grow`

A propriedade `flex-grow` recebe como valor um número que represente o "fator de crescimento". Esse número define como o elemento-filho reagirá à sobra de espaço em um contêiner _flex_. A sobra de espaço é calculada pelo o tamanho total do contêiner _flex_ menos o espaço base total ocupado pelos elementos-filhos. Por padrão, o valor de `flex-grow` é `0`.

Para entender um pouco melhor como essa propriedade funciona na prática, vamos utilizar um exemplo. Em um contêiner _flex_ com `300px` de tamanho, temos três elementos-filhos com `100px` de tamanho. Os dois primeiros têm o valor de `flex-grow: 1` e o terceiro tem o valor de `flex-grow: 2`. Nesse exemplo, teríamos uma sobra de espaço de `200px` que seria distribuída entre os três elementos-filhos de acordo com os seus fatores, de forma que no final o espaço ocupado por eles seja igual ao tamanho do contêiner. Já que o terceiro elemento tem um fator de crescimento `2`, e os dois primeiros têm um fator de crescimento `1`, o terceiro elemento crescerá duas vezes mais do que os outros dois.

![Ilustração com exemplo de flex-grow](/posts/introducao-flexbox/flex-grow.png)

### A propriedade `flex-shrink`

Assim como podemos tornar flexível o crescimento dos elementos-filhos, podemos também utilizar `flex-shrink` para definir os seus fatores de encolhimento.

Quando faltar espaço em um contêiner _flex_, os seus elementos-filhos são encolhidos de acordo com o fator de encolhimento. Por padrão, o valor de `flex-shrink` é `1`.

![Ilustração com exemplo de flex-shrink](/posts/introducao-flexbox/flex-shrink.png)

### Controlando o tamanho de elementos com `flex-basis`

O tamanho dos elementos em um contêiner _flex_ é calculado também de forma flexível. Por padrão, esse tamanho é calculado de acordo com o tamanho do conteúdo do elemento ou pelo seu `width` ou `height`. Esse valor padrão ajuda a pessoa desenvolvedora a criar interfaces que se adaptam ao tamanho do conteúdo, mas pode ser um tanto confuso para quem não espera esse comportamento

![Ilustração com exemplo de flex-basis auto](/posts/introducao-flexbox/flex-basis-auto.png)

A propriedade `flex-basis` pode ser alterada de seu valor padrão `auto` para qualquer unidade de medida de tamanho e porcentagem. Se o elemento tiver `width` ou `height` definidos e um `flex-basis` for definido, o valor de `flex-basis` tomará precedência no cálculo do tamanho base de um elemento _flex_.

![Ilustração com exemplo de flex-basis com valores numéricos](/posts/introducao-flexbox/flex-basis-numero.png)

## Ordenando elementos-filhos de um contêiner _flex_

Outra propriedade que o Flexbox adicionou ao CSS foi a `order`, que controla a ordem dos elementos-filhos em um contêiner _flex_. Elementos em um contêiner serão ordenados de forma ascendente baseados no valor de `order` e sua posição no DOM.

O valor padrão de `order` é `0`. Você pode definir `order` com qualquer número inteiro.

![Ilustração com exemplo de order](/posts/introducao-flexbox/order.png)

Vale alertar que a ordenação através de valores `order` não altera a ordenação desses elementos no DOM, o que cria uma diferença na ordem real dos elementos e sua ordem de exibição. Isso é um problema no uso da navegação por teclado, mas um problema ainda maior para usuários de softwares de leitura de tela. Evite utilizar `order` se a ordenação tiver efeitos hierárquicos que prejudicariam a acessibilidade do seu site.

## Suporte em diferentes navegadores

O Flexbox é suportado por grande parte dos navegadores. Mesmo assim, alguns bugs podem quebrar ou mudar o comportamento dos seus elementos de um navegador para outro. O projeto [flexbugs](https://github.com/philipwalton/flexbugs) possui uma lista de mais de 10 bugs, com dicas de como contorná-los.

Fora estes bugs, você pode esperar que o seu site estilizado com Flexbox seja renderizado corretamente em todos os navegadores mais utilizados do mercado. O site Can I Use [lista o módulo CSS de Flexbox](https://caniuse.com/flexbox) como sendo suportado nos navegadores de mais de 97% dos usuários no mundo.

## Continue aprendendo

Todas essas ferramentas do módulo CSS Flexbox trouxeram uma quantidade enorme de controle e flexibilidade para estilizar componentes e layouts com CSS. Em breve escreveremos um outro post com exemplos práticos utilizando todas as propriedades que cobrimos nesta introdução. Por enquanto, você pode dar uma olhada no [Solved by Flexbox](https://philipwalton.github.io/solved-by-flexbox/) para ver como o Flexbox resolve problemas clássicos de layout ou então jogar o [Flexbox Froggy](https://flexboxfroggy.com/) para aprender na prática.

Para escrever este post eu utilizei diversas referências, incluindo a especificação da W3. Para continuar aprendendo sobre Flexbox, recomendo:

- [Conceitos básicos do Flexbox (developer.mozilla.org)](https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Flexible_Box_Layout/Conceitos_Basicos_do_Flexbox)
- [A guide to Flexbox (css-tricks.com)](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [What Happens When You Create A Flexbox Flex Container? (smashingmagazine.com)](https://www.smashingmagazine.com/2018/08/flexbox-display-flex-container/)
- [CSS Flexible Box Layout Module Level 1 (w3.org)](https://www.w3.org/TR/css-flexbox-1/)

_Obrigado Jonathan Zanella por toda a ajuda na revisão e edição deste post._


Aprenda a utilizar o Flexbox (display: flex) para criar layouts com CSS, usando este guia ilustrado com todas as suas propriedades.

Guia completo de Flexbox - display: flex


**A Jamstack é uma arquitetura criada para construir sites mais rápidos, que escalam com facilidade e que são mais seguros. Antes mais conhecidos como "sites estáticos", esses sites são geralmente um conjunto de arquivos HTML, CSS e JS que conversam com o servidor apenas quando necessário.**

Um dos motivos para a Jamstack estar se tornando tão popular é a explosão de ferramentas poderosas que permitem criar sites que vão além do que tradicionalmente sites "estáticos" faziam. Agora existem diversos CDNs especializados em entregar esses sites rapidamente para usuários de qualquer lugar do mundo, ferramentas para integração e publicação contínua, CMSs Headless perfeitos para sites Jamstack e ferramentas para criá-los sem dor de cabeça.

Neste guia completo para iniciantes, eu vou te explicar os porquês de usar esta arquitetura, ferramentas para construir e publicas sites Jamstack e também suas desvantagens.

## Arquitetura de um site JAMStack

Sites Jamstack utilizam uma arquitetura diferente de sites que utilizam um servidor backend tradicional. Sites que utilizam servidores – como Wordpress, Laravel ou Rails – geram uma resposta para cada vez que um usuário requisita uma nova página. Já sites Jamstack têm todas as suas páginas pré-renderizadas antes de serem publicadas e podem ser servidos diretamente de uma Content Delivery Network (CDN) assim como já fazemos com imagens, vídeos e outros arquivos estáticos.

O fato de sites Jamstack serem compilados para arquivos estáticos não os torna menos capazes do que sites renderizados no servidor. Um grande motivo para o pessoal da [Netlify](https://www.netlify.com/) ter criado o termo "Jamstack" foi fugir do termo "estático" – como disse Mathias Biilmann [em um episódio do _JAMStack Radio_](https://www.netlify.com/blog/2016/09/15/the-jamstack-origin-story/). Usando JavaScript e consumindo APIs, sites Jamstack são bastante dinâmicos e utilizam de arquivos estáticos apenas como uma forma de remover a necessidade de um servidor mais complexo.

As ferramentas utilizadas para criar sites Jamstack são comumente chamadas de geradores estáticos. Os geradores estáticos mais utilizados são o Hugo, Next.js e Gatsby. Para gerenciar o conteúdo destes sites, normalmente utiliza-se arquivos Markdown ou um Headless CMS.

## Por que construir um site usando Jamstack?

A primeira vantagem de utilizar esta arquitetura é a **performance**. Como o frontend já foi pré-renderizado antes da publicação e estes arquivos normalmente são servidos direto de uma CDN, o tempo de resposta de um site Jamstack tende a ser muito baixo. Utilizando ferramentas modernas como [Gatsby](#gatsby), o JavaScript utilizado dentro de cada página é altamente otimizado e leve – assim como o CSS é reduzido a apenas o necessário. É inclusive bastante comum ver sites Jamstack atingirem altas pontuações no [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=pt-br).

Uma outra vantagem de uma arquitetura baseada em arquivos estáticos é a **escalabilidade**. Enquanto sites tradicionais baseados em um servidor dinâmico dependem de camadas de cache para entregar páginas com rapidez em momentos de altas cargas de tráfego, sites Jamstack já foram pré-renderizados. Também não é necessária a criação de lógicas complexas de invalidação de cache, já que a arquitetura e os geradores estáticos tomam conta disto por você.

Como sites Jamstack são publicados como uma coleção de arquivos estáticos, eles também são **facilmente portáveis** para diferentes provedores como AWS, Netlify, Vercel e Google Cloud Platform.

## Principais ferramentas para construir um site Jamstack

Nos últimos anos muitas ferramentas surgiram para construir sites com esta arquitetura, incluindo o Next.js, Gatsby, Hugo e outros geradores estáticos. Existem opções para quem quer criar sites utilizando frameworks JavaScript como React e Vue ou até geradores estáticos com engines de templates mais tradicionais como Hugo e Jekyll.

Escolher entre todas essas ferramentas pode ser uma tarefa bastante difícil. Abaixo eu trouxe uma lista com as opções mais comuns e que eu recomendo para seu próximo projeto. Além destas três, existem muitas outras ferramentas listadas em [jamstack.org/generators/](https://jamstack.org/generators/).

### Next.js

O [Next.js](https://nextjs.org/) evoluiu muito desde sua primeira versão. Na minha opinião, ele é agora a ferramenta mais versátil para criar sites Jamstack. Criado pela Vercel, o Next.js é um framework JavaScript bastante conhecido que usa como base o React e o Node.js.

Com uma arquitetura simples e ferramentas de compilação pré-configuradas, você rapidamente poderá criar sites Jamstack com o Next.js. Além de páginas pré-renderizadas, você pode utilizá-lo também para criar páginas geradas no servidor e até rotas de API com Serverless Functions.

Toda a complexidade de configurar ferramentas como Webpack e Babel, otimizar bundles para publicar em produção, configurar um servidor para renderizar componentes React e criar todo um backend para algumas pequenas rotas de API somem ao usar o Next.js.

Se você utiliza Vue ao invés de React, também vale a pena conferir o [Nuxt.js](https://nuxtjs.org/).

### Gatsby

O [Gatsby](http://gatsbyjs.com/) é uma abordagem diferente para criar sites com React. Sua ideia principal é juntar uma arquitetura baseada em plugins com o poder do GraphQL (uma linguagem de consulta de dados).

Com mais de 2000 plugins, é bastante simples integrar o Gatsby com diferentes fontes de dados como arquivos Markdown, Headless CMSs, planilhas, e bancos de dados. Após adicionar e configurar um plugin, estes dados estarão disponíveis no GraphQL.

Assim como o Next.js, o Gatsby faz um grande trabalho por você para exportar um site Jamstack com alta performance sem que você tenha que passar muito tempo configurando o processo de compilação.

O [sistema de temas do Gatsby](https://www.gatsbyjs.com/plugins/?=gatsby-theme) também é bastante interessante. Temas do Gatsby juntam configurações e plugins em um único pacote, oferecendo uma forma ainda mais simples de criar sites como blogs, lojas e wikis.

### Hugo

Mais como um gerador de sites tradicional, o [Hugo](https://gohugo.io) é um projeto em Go criado para ser extremamente rápido e versátil para criar sites estáticos.

Sem instalar plugins você pode trabalhar com diversos tipos de conteúdo, taxonomias e conteúdo dinâmico de APIs. Além disso, o sistema de templates do Hugo é recheado de utilitários para criar layouts diferentes para cada página, trabalhar com SEO, internacionalização e até exportar o seu projeto para JSON ou AMP.

Existe uma grande quantidade de temas para Hugo, que vão desde os criados para sites pessoais até temas para criação de apresentação de slides. Ao contrário do Gatsby e do Next.js, Hugo não usa React como sua linguagem de templates o que pode ser uma grande vantagem para quem não planeja muitas interações renderizadas no lado do navegador ou não quer prender o seu site nesta biblioteca JavaScript.

## Os melhores Headless CMSs para seu projeto

Para o conteúdo que preenche os sites Jamstack, é bastante comum utilizar um Headless CMS. Estes CMSs são diferentes de CMSs mais tradicionais como o WordPress já que eles não tocam na implementação da interface de usuário que mostrará o conteúdo. Em vez disso, eles oferecem uma API para que você possa consumir e renderizar o conteúdo por conta própria.

A grande vantagem de utilizar um Headless CMS é separar bem a criação do conteúdo do código do site. Dessa forma, times diferentes dentro de um projeto podem trabalhar no código e no conteúdo. Headless CMSs também tendem a ser bastante flexíveis em como você pode organizar o conteúdo e oferecem hospedagem de arquivos como imagens e vídeos.

Alguns destes CMSs são o Netlify CMS, Strapi e Ghost. Você pode conferir uma lista completa em [jamstack.org/headless-cms/](https://jamstack.org/headless-cms/).

### Netlify CMS

Feito pela empresa que cunhou o termo Jamstack e têm trabalhado para difundir esta arquitetura, o [Netlify CMS](https://www.netlifycms.org/) é uma solução prática para criar conteúdo para sites Jamstack. Nele todo o seu conteúdo é armazenado dentro de um repositório git, te permitindo controlar o versionamento de conteúdo integrado com o código.

Além de ser open-source com uma licença MIT, o Netlify CMS pode ser extendido para acomodar as necessidades de edição de conteúdo do seu projeto. Como ele roda como um webapp embutido em seu site, você não precisa de um servidor para hospedá-lo.

### Strapi

Uma opção ainda mais poderosa para usar como Headless CMS é o [Strapi](https://strapi.io/). Com um plano gratuito praticamente completo e seu código-fonte open-source, o Strapi é uma boa alternativa para você auto-hospedar um Headless CMS.

Dentre as suas funcionalidades estão tipos de conteúdo ilimitados, APIs REST e GraphQL, armazenamento de arquivos e mídia, assim como controles de acesso de usuários. Você pode hospedar sua instância do Strapi em servidores de sua escolha como na AWS, Digital Ocean ou Heroku.

### Ghost

Mais um projeto de código aberto, o [Ghost](https://ghost.org/) é um CMS tradicional que também oferece APIs para consumo de conteúdo por geradores de sites Jamstack.

Além de poder criar seu conteúdo, escolher um tema, gerar seu site e hospedá-lo com o serviço de hospedagem oficial, você pode controlar tudo por conta própria assim como no Netlify CMS e Strapi. A grande diferença entre eles e o Ghost é que ele é bastante especializado em criar sites no estilo de blogs ou publicações de jornal.

O Ghost também conta com uma [grande quantidade de integrações](https://ghost.org/integrations/) para facilitar a sua vida e permitir que você construa um site bastante completo sem ter que sequer escrever uma única linha de código.

## Como publicar sites Jamstack

Sites Jamstack podem assumir diversas formas, dependendo das funcionalidades que você implementar e das ferramentas que utilizar. Porém, você provavelmente não precisará muito mais do que uma CDN para hospedá-los. Algumas boas opções de serviços que se especializaram em hospedar este tipo de sites são: [Netlify](https://www.netlify.com/) e [Vercel](https://vercel.com/).

As duas plataformas são muito similares e oferecem uma forma fácil de criar fluxos de integração contínua para seu repositório git e publicar arquivos estáticos ou funções serverless em produção. Com diversas funcionalidades configuradas por você, é relativamente simples apontar uma destas plataformas para o repositório do seu projeto, definir um domínio e publicar seu site.

Uma das funcionalidades que mais me chamou atenção nos dois foi o "deploy atômico". Para cada commit no seu repositório, o Netlify e o Vercel criam um novo deploy e um link que pode ser acessado pra sempre. Isso torna simples pré-visualizar mudanças antes de irem para produção ou comparar diferentes versões antigas do seu site.

Além dos serviços oferecidos pelos dois, a Netlify se destaca com alguns adicionais. Lá você pode criar fluxos de otimização de arquivos como .html e imagens, testes A/B, integrar com um Analytics do lado do servidor, implementar autenticação e até guardar dados de formulários sem criar APIs manualmente.

Apesar destas platformas tornarem muito fácil a publicação de sites Jamstack, você não precisa utilizá-las. Em vez de uma plataforma tudo-em-um, pode fazer sentido para você publicar e hospedar o seu site em lugares como na AWS S3 ou até em VPSs da Digital Ocean.

## Desvantagens de sites Jamstack

Todas as arquiteturas vêm com vantagens e desvantagens. Já que o foco do Jamstack é em pré-renderizar páginas e utilizar JavaScript consumindo APIs para torná-las dinâmicas, sites que possuem páginas com conteúdo que mudam muito não são os melhores candidatos para esta arquitetura.

Alguns exemplos de sites que seriam melhor implementados com outra arquitetura são:

- Webapps onde o conteúdo muda de usuário para usuário em experiências logadas, principalmente os que expõem conteúdo de acordo com níveis diferentes de permissão
- Sites em que o conteúdo se baseia em computação do lado do cliente, como ferramentas de edição de fotos ou blocos de notas.

Entretanto, isso não significa que as ferramentas que mencionamos aqui também não sejam úteis para estes tipos de sites. Com o Next.js, por exemplo, você pode implementar APIs, integrá-las na criação da parte estática do seu site e criar experiências que executam apenas no navegador – tudo integrado em uma arquitetura simples e pré-configurada.

Mesmo que você não esteja criando um site que combina perfeitamente com a arquitetura Jamstack, vale a pena utilizar alguns dos seus conceitos – como a pré-renderização de conteúdo – para melhorar a performance do seu projeto.

## Continue aprendendo

Neste artigo eu falei um pouco sobre o que é a arquitetura Jamstack, porquê utilizá-la, indiquei algumas ferramentas e também mostrei algumas desvantagens. Existe bastante conteúdo sobre o Jamstack, principalmente em inglês. Se você quiser continuar aprendendo, dá uma olhada nesta lista de recursos para seus estudos:

- [NextJS, Gatsby ou Create React App? Entendendo os conceitos de SSR, SSG e SPA](https://willianjusten.com.br/nextjs-gatsby-ou-create-react-app-entendendo-os-conceitos-de-ssr-ssg-e-spa/)
- [The issues with JAMStack: You might need a backend](https://www.browserlondon.com/blog/2020/04/20/issues-with-jamstack-you-might-need-backend/)
- [Jamstack Best Practices](https://jamstack.org/best-practices/)
- [The Jamstack origin story](https://www.netlify.com/blog/2016/09/15/the-jamstack-origin-story/)
- [Gatsby.js Tutorials](https://www.gatsbyjs.com/tutorial/)
- [Create a Next.js App](https://nextjs.org/learn/basics/create-nextjs-app)


Conheça mais sobre a arquitetura feita para construir sites mais rápidos, escaláveis e seguros. Aprenda porquê e como usá-la.

O que é a Jamstack? Porquê e como usar


_Este artigo também está disponível como [slides][slides]._

Com cerca de 360 propriedades, não faltam muitas coisas para você conseguir
estilizar basicamente qualquer coisa usando a versão atual do CSS. O maior
problema na verdade está como solucionar problemas de estilização de uma forma
escalável. Escalável para que seu código seja flexível o suficiente para não
ter que ser completamente reescrito no próximo redesign que com certeza vai
acontecer, e também escalável para que seu time possa continuar mantendo
o código por muitos anos.

Em meio a tantos frameworks diferentes e técnicas como Flexbox, Grid CSS,
floats, e até CSS-in-JS, é difícil olhar através do superficial e achar as boas
práticas e hábitos essenciais para escrever CSS que dura.

Após muitos anos como desenvolvedor front-end acabei desvendando alguns
hábitos que me levam a escrever CSS mais escalável. Agora, quase sempre que
encontro estilos difíceis de lidar ou que dão bastante trabalho para refatorar,
percebo que eles não seguem um dos três princípios básicos que vou te ensinar.

Aprender a escrever CSS escalável é essencial, já que independente da sua
abordagem para criar interfaces de usuário na web, você vai precisar
estilizá-la. E, por mais bonita e bem planejada que seja, esta mesma interface
de usuário vai passar por muitas mudanças conforme o produto é alterado. Novas
funcionalidades precisam de espaço. O posicionamento de alguns elementos são
trocados para melhorar a experiência do usuário. Novas páginas são criadas.
Estilos mais "modernos" são propostos. Três hábitos podem nos ajudar a passar
por tudo isso com menos dor de cabeça.

## Abrir mão do posicionamento

Com CSS nós podemos posicionar qualquer elemento em qualquer lugar. Apesar
disso, não é sempre que devemos usar `position: fixed` ou `position: absolute`
para controlar exatamente em qual pixel na tela um elemento estará. Abrir mão
do posicionamento de um elemento vai ainda mais longe do que isso.

Cada vez que tentamos controlar o posicionamento de um elemento, este elemento
se torna menos reutilizável em diferentes contextos e talvez precise ser
refatorado quando o layout das páginas em que são utilizados forem alterados.

Vamos imaginar que temos um componente `Botao`. Por componente, eu quero dizer
um conjunto de HTML, CSS e JS que trabalham juntos – usando ou não um
framework. Este componente geralmente é utilizado em conjunto com outros botões
na nossa interface de usuário. Para posicionar estes componentes poderíamos
recorrer a seletores CSS como `.botao + .botao`, adicionando um pouco de
`margin` entre cada botão. Dessa forma, qualquer lugar que usasse `Botao` teria
o espaçamento entre eles padronizado.

O problema dessa solução é que ela não é escalável. No momento que quisermos
trocar um `Botao` por um `Link`, este espaçamento não seria mais aplicado.
Conforme estas excessões se tornam a regra, poderíamos acabar com diversos
seletores muito específicos: `.botao + .link`, `.link + .botao` e
`.link + .link`. É inviável tentar lidar com espaçamento automático entre
componentes porque não temos certeza de como eles serão utilizados em conjunto
no futuro.

![imagem com um botão e um link sem espaçamento entre
eles](/posts/tres-habitos-css-escalavel/botao-botao.png)

Uma forma melhor de espaçar componentes e evitar este problema com seletores
específicos é dar ao componente que os engloba a responsabilidade de
espaçá-los. Um componente de `Fomulario`, por exemplo, poderia ditar os estilos
de espaçamento entre cada `Botao`, `Link` e `Input`. Controlando o espaçamento
de cima pra baixo na hierarquia dos componentes torna o CSS muito mais
escalável por permitir que componentes de baixo nível possam ser utilizado em
contextos completamente diferentes ao mesmo tempo sem que eles tenham que ter
estilos específicos para cada um desses contextos.

## Abrir mão do tamanho

Assim como abrir mão do posicionamento, abrir mão do tamanho também é um ótimo
hábito para escrever CSS escalável. Em uma página de galeria, por exemplo, nós
poderíamos estilizar o componente `Figura` de tal forma que seu `width` estaria
fixo em `300px`, já que este é o tamanho exato deste elemento no design. Porém,
se decidirmos utilizar `Figura` dentro de um elemento maior ou menor, nós
teríamos problemas.

Ao abrir mão do espaçamento, delegamos ao máximo a definição real do tamanho de
um elemento na tela. Isso significa que quase todos os seus componentes seriam
estilizados com `width: 100%`, de modo que quem os engloba pode decidir seu
tamanho real final.

![images de uma galeria de imagens com Figura em diversos
tamanhos](/posts/tres-habitos-css-escalavel/galeria-diversa.png)

Existem alguns casos em que não é possível abrir mão do tamanho dos nossos
componentes. É, por exemplo, muito difícil estilizar um componente complexo
para comportar tamanhos muito grandes e muito pequenos sem o uso de _media
queries_. Não existe hoje uma forma de estilizar um componente baseado em seu
tamanho na tela, já que ainda não temos algo como [Container
Queries][container-queries] no CSS.

Mantenha sempre em mente que <mark>nenhuma solução técnica vem sem
desvantagens</mark>. Para componentes assim, talvez o ideal seja ter diferentes
versões dos seus estilos que podem ser utilizadas usando uma classe no elemento
principal para definir uma versão "enxuta" ou "completa".

## Deixar o conteúdo fluir

Conteúdo é quase sempre o centro de um design. E em muitas interfaces de
usuário dinâmicas, é muito difícil saber ao certo o tamanho de um texto, imagem
ou vídeo. Botões podem ter mais texto do que cabe em apenas uma linha. Imagens
talvez sejam estreitas e não quadradas. Títulos podem ter palavras que não
cabem inteiras na largura de um dispositivo móvel. Conteúdo é dinâmico, e seus
componentes devem deixá-lo fluir.

Existem basicamente duas maneiras de lidar com a diversidade de conteúdo:
forçar o conteúdo para se adaptar ao seu componente (abordagem controlada)
e adaptar o componente ao conteúdo (abordagem fluída).

### Abordagem controlada

Para forçar o conteúdo a se adaptar a um componente, podemos usar `overflow: hidden`, `width` e `height` fixos, `text-overflow: ellipsis` e muitas outras
regras. Esta abordagem normalmente é necessária quando temos que manter um
balanço e prevenir que um conteúdo gerado pelos usuários quebre a interface.

![imagem de uma figura com sua descrição incompleta](/posts/tres-habitos-css-escalavel/chicago-controlada.png)

O problema de tentar controlar o conteúdo é que uma mudança nos requerimentos
deste conteúdo pode nos forçar a refatorar todos os componentes que não se
adaptam ao conteúdo.

### Abordagem fluída

Uma outra forma de lidar com conteúdo é com uma abordagem fluída. Se quase
todos os nossos componentes seguirem essa abordagem, teremos uma interface de
usuário flexível que se adapta tanto ao conteúdo quanto ao dispositivo. O CSS
tende a nos levar por este caminho, já que a maioria dos valores padrão foram
definidos com o intuito de deixar o conteúdo fluir. Novas técnicas de layout
como Flexbox e Grid CSS também têm valores padrão onde o conteúdo é uma parte
bastante importante nas definições de posicionamento e espaçamento.

Pode ser um pouco assustador não ter o controle total de como um componente ou
toda a sua interface de usuário aparecerá para o usuário final. Ao usar algumas
regras como `overflow-wrap: break-word` e `min-width: 200px` definimos limites
de como o conteúdo vai fluir dentro dos nossos componentes, tendo um pouco mais
de controle, mas não o suficiente para limitar demais o conteúdo.

![imagem de uma figura com sua descrição completa](/posts/tres-habitos-css-escalavel/chicago-fluida.png)

É claro que você pode misturar a abordagem fluída com a controlada. Esta
é normalmente a forma que eu implemento componentes que recebem conteúdo
bastante diverso. Você pode precisar controlar o tamanho do título
e a quantidade máxima de palavras na descrição de uma imagem, guiando quem
escreve o conteúdo a se encaixar em um meio-termo entre liberdade e controle.

## Desenvolva os seus hábitos

Não é fácil desenvolver interfaces para a web, principalmente para produtos que
evoluem em um ritmo constante. Escrever sobre estes três hábitos é o resultado
de muitos anos trabalhando em diversos projetos dos mais variados tamanhos. Com
certeza existem muitos outros hábitos que podemos seguir para escrever CSS
escalável, talvez alguns que eu até siga sem mesmo perceber ou formalizar.

Documentar problemas e soluções encontradas pode ser um ótimo caminho para você
começar a descobrir os seus próprios hábitos. Lembre de utilizar cada uma das
360 propriedades do CSS com uma coisa em mente: nunca faltarão tarefas para
alterar interfaces de usuário. Abrir mão do posicionamento, abrir mão do
tamanho e deixar o conteúdo fluir são só algumas boas práticas que podemos
seguir para manter nossos projetos em ordem mesmo após anos de trabalho.

[container-queries]: https://alistapart.com/article/container-queries-once-more-unto-the-breach/
[slides]: https://speakerdeck.com/hugobessaa/tres-habitos-para-escrever-css-escalavel


O que você precisa saber para escrever CSS que escala junto com o seu projeto.