Minhas boas práticas – CSS

1. Prefácio

Hoje em dia, o CSS é subutilizado. Existe um abismo entre os desenvolvedores Angular/React/Vue/... e os designers de UI.

O designer de UI aninha trinta <div> e pendura quarenta classes CSS nelas, enquanto o dev Angular se empolga a cada duas semanas com a lib mais nova – e o dependency hell dele já faz tempo que não builda sem npm i --force, porque as peer dependencies estão em conflito. CSS e HTML pouco interessam ao fanático por TypeScript. Até para os inputs mais simples ele precisa usar o Material, porque tem medo de não conseguir fazer a validação de outro jeito. E ninguém quer perder tempo reinventando a roda. Só que, no primeiro requisito que a biblioteca não cobre, ele perde todo esse tempo de novo e acaba lendo as issues da lib no GitHub – e disso ele não se dá conta.

Como desenvolvedor em um projeto fullstack, você raramente tem a chance de pôr em prática seus conhecimentos de designer de frontend. Você recebe as telas prontas no Figma e precisa implementá-las exatamente assim. A maioria dos desenvolvedores frontend desse tipo nem sabe que dá para montar um layout responsivo com uma única linha de CSS. O CSS está mais poderoso do que nunca. Acabou a época dos hacks de estilo em JS, das inúmeras media queries e dos workarounds para o IE 8. Viva!

2. Supercentralizado

Nem sempre pegou bem em entrevistas, mas eu adorava: quando me perguntavam se eu era bom em frontend, eu gostava de responder “Ah, sim. Eu sei centralizar uma <div> na vertical.”

Centralizar uma div é notoriamente difícil.

Não é mais:

.parent {
    display: grid;
    place-items: center
}

3. Grid responsivo

.parent {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

4. Flex responsivo

.parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    flex: 1 1 150px; /*  Stretching: */
    flex: 0 1 150px; /*  No stretching: */
    margin: 5px;
}

5. Layout de página

.parent {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

6. Barra lateral

.parent {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

7. Créditos

1-Line Layouts