Desmistificando o CSS - Vamos falar sobre Caixas
Tags: css, braziliandevs, beginners
Published: 2022-07-12 13:03:57

Olá!

Seja bem-vindo a segunda parte do Desmistificando o CSS que começou [aqui](https://dev.to/mpfdev/desmistificando-o-css-intro-em8). A primeira parte ficou com bastante informação sobre muitas coisas que não se utilizam demais, mas eu acredito que precisamos saber que aquilo existiu pra sedimentar um conhecimento dentro desta área.

Vamos começar!

# Abstração sobre as caixas

Uma maneira de estabelecer o protótipo de uma página é visualizando o seu wireframe, uma interface inicial para sugerir a estrutura do site que queremos.

Como por exemplo, podemos ver abaixo alguns tipos de wireframe:

1. Wireframe feito a mão

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ctnaw74l7pry0tmpdyla.png)

2. Exemplo simples de [Wireframe da Valeria Pivovarova](https://dribbble.com/shots/1447696-Startup-Simple-Example-Wireframe)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6920osudvcz5e68448u2.png)

Quando vemos a estrutura do site que queremos, ou como será feito o trabalho de torna-lo isso real, não estamos lidando ainda com o sistema de caixas.

Não existe uma regra de ordenação, mas dependendo do modelo de layout do CSS3 que usaremos, temos que nos adaptar a como ele funciona, onde todos os modelos mais usados, trabalham utilizando o principio de caixas-pai (parent-box) e caixas-filho (child-box).

Por conta disto, e de manipular caixas com essa intenção, hoje vamos replicar o sistema de caixas do site de notícias da BBC.

Hoje usaremos principalmente as ideias apresentadas anteriormente:

- CSS Floats
- Caixas

# Notícias BBC e a abstração de caixas

Antes de começar, eu vou partir de um principio aqui para o reset das configurações universais de `margin` e `padding` da folha de estilo, também do valor `box-sizing: border-box` . O motivo eu vou explicar melhor no futuro.

A principio e de forma resumida, o `margin` e o `padding` são resetados, porque cada navegador tem um valor diferente inicial para estas propriedades, assim, quando resetamos, garantimos que todos os navegadores interpretem da maneira como estamos vendo em nosso navegador. O segundo, a propriedade do `box-sizing` é diretamente ligada ao cálculo matemático que o navegador faz sobre as nossas caixas, e quando escolhemos `border-box` queremos que todas as caixas sejam somadas como `border + padding + conteúdo + padding + border`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3db21hk762nta8bdebx.png)

Como no post anterior eu utilizei de div, neste usarei de acordo com boa semântica e estrutura do HTML5, usarei `sections e articles`, desta maneira, a gente consegue garantir que a estrutura seja compreensível para outros aparelhos de leitura e áudio.

## Visualizando a página inicial do site de notícias da BBC

Primeiro vamos visualizar o site real, como segue na figura abaixo:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxa59xsfstj858d18s37.png)

E podemos ver de certa forma, o wireframe dessa página acima, de forma bem simplificada:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpfc8mzoxkbpz6hd5q67.png)

Mas fica aquela parte, afinal, como traduzir essas caixas de diferentes tamanhos, espalhadas lado a lado, com uma certa simetria.

Eu sou muito favorável, e talvez aí seja por conta do meu background técnico, de tudo que a gente tem a nossa frente, é colocar o lápis no papel, e visualizar primeiro, dar vida, só depois, a gente abre o nosso editor de texto e aplica.

Partindo de tudo que eu falei até aqui, do modelo de caixas, tendo caixas-pai e caixas-filho, e da ideias de colocar primeiro no papel as estruturas que eu quero montar, resultou nisso aqui:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b0rqg8o5d0oenom4s7y.png)

## Da abstração para o código

Tendo em visto o nosso último desenho, e tendo tomado que essa será a base pra réplica do original de notícias da BBC, agora é hora de visualizarmos como transformar essa estrutura para o nosso querido HTML.

Seguido que a partir de agora usaremos o HTML semântico.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjrx5ft1zbarseew3tsr.png)

E o seu código HTML respectivo,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xp5p0yhxogplyp1yxjih.png)

Assim podemos começar a visualizar os relacionamentos entre caixas pais-e-filhos dentro da nossa estrutura. E isso, **é muito importante.**

A partir de agora, já temos em mente o que queremos para a utilização do CSS Float, como apresentado no primeiro post.

Como comentado naquele post, eu mencionei que as caixas tem largura, mas não tem altura quando não tem conteúdo, correto?

Por conta disso, como só estamos tratando com caixas aqui, vamos ter que forçar um tamanho especifico de alturas para que possamos trabalhar com elas.

Primeiro vamos manipular as caixas vermelhas, dessa maneira podemos dividir nossas tarefas e agir de forma mais prática e direta.

1. Definir suas alturas e larguras
2. Colocar bordas para que possamos visualizar em nosso navegador
3. Flutuar os elementos

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82rqvv2hc6a7ceqbadny.png)

E assim, em nosso navegador, conseguiremos visualizar as caixas.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0g6kozu08feu0w5oamu.png)

Exatamente como o nosso rascunho. É claro, não está com precisão pixel-a-pixel, mas essa não é nossa intenção, aqui queremos entender e o perfeccionismo sempre ficará pro final de qualquer atividade.

O motivo do `overflow:auto` na caixa amarela (pai de todas) é pelo motivo de não termos conteúdo, dessa maneira eu não preciso ficar chutando a altura dela pra que cubra os seus filhos, é uma maneira para que possamos ter mais controle do layout.

A grossura das bordas, apenas a carácter de estilização e visualização. E todo o resto, já vimos no post passado.

Seguindo a mesma lógica anterior, podemos trabalhar para colocar as caixas dos artigos dentro da caixa intitulada como `main-section__right`

Vamos adicionar agora esse código de estilização para se dirigir aos nossos artigos.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ucblaibk6v7l37fj6r7.png)

O que é muito importante reparar aqui? Essas caixas azuis são filhos diretos da caixa `main-section__right` então estas caixas vão flutuar em referência a ela. Vejamos abaixo,

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mr09jncvm6rhx8jk9acp.png)

E se nós removermos as bordas vermelhas e adicionar uma cor de fundo para simular uma notícia. As bordas só estão aqui como nossa guia para estilização.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7s05jn9jnt34d9jk3rf.png)

Legal, né?

Já temos a base do nosso conceito inicial de manipular as caixas dentro do HTML, e nada disso é chute.

Eu vou manter com as bordas no link posteriormente para caso você queira visualizar o código no [Codepen](https://codepen.io/mpfdev/pen/ExQJQPM).

# Acabou?

Claro que não, agora temos a estrutura do nosso site, mas quando olhamos a foto principal, ela tem uma imagem de fundo, e textos por cima. 

Usando esse mesmo sistema de abstrair as caixas, você consegue visualizar como adicionar textos com essa relação entre caixas pais-e-filhos?

Eu vou terminar esse post por aqui, mas no próximo vamos adicionar textos e imagens.

Dessa maneira vamos construindo uma base para aprendermos sobre Flexbox.

# Para ler mais

- [Box-sizing](https://developer.mozilla.org/pt-BR/docs/Web/CSS/box-sizing)
- [Overflow](https://developer.mozilla.org/pt-BR/docs/Web/CSS/overflow)
- [Float](https://developer.mozilla.org/pt-BR/docs/Web/CSS/float)