Desmistificando o CSS - Intro
Tags: css, braziliandevs, beginners
Published: 2022-07-07 23:34:01

Oi! Essa é a primeira parte de um projeto pessoal para ajudar a desmistificar o CSS. Sempre vejo o CSS sendo motivos de memes para centralizar, mas muitas vezes vejo muita gente iniciando na programação já com uma ideia negativa quanto a estilização.

Eu não trabalho na área, estou em transição de carreira, e quero poder contribuir para que outros que também estão iniciando os estudos, uma nova maneira de poder visualizar e entender o CSS.

Uma referência do que eu já fiz utilizando apenas CSS puro, sem nenhum uso de framework, é este site: [https://spacedevchallenge.netlify.app/](https://spacedevchallenge.netlify.app/) que faz parte de um desafio da plataforma Frontend Mentor.

Eu pretendo escrever isto em algumas partes, e não pular diretamente para Flexbox e CSS Grid. Assim podemos juntos aprender, e evitar os chutes.

# Entendendo o navegador

Quando olhamos para o nosso navegador, pode-se reparar que dependendo do tamanho da tela, existem dois valores que são sempre constantes: a sua largura e a sua altura.

![imagem do navegador, mostrando sua largura e altura](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9xj78orf33ojo97x2s3.png)

É dentro desse universo plano e bem estruturado, onde você vai trabalhar.

O mais legal desta ideia, é que dentro dessa rede bem estruturada e planar, pra que possamos organizar qualquer elemento que se coloque dentro do navegador, podemos pensar que estamos trabalhando com estruturas de caixas.

E aí entramos no nosso primeiro entendimento, o comportamento chamado `display: block`.

# Display: Block

Essa propriedade `display` é o que determina o comportamento de um elemento. Isso nos pode remeter, não instintivamente, mas cada elemento HTML possui um `display` (comportamento) padrão.

Por exemplo, porque quando colocamos dois elementos `<p>` lado-a-lado no HTML, eles não ficam lado-a-lado?

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

- Será que é porque o HTML é inteligente e identifica o ponto final como a hora de pular linha?
- Mas se for isto, porque não faz o mesmo quando colocamos dois elementos `<span>` lado-a-lado?

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

Isso se dá pela natureza padrão (especificação) de como esses elementos forem criados dentro no HTML.

O elemento `<p>` por padrão é um elemento de `display: block`, onde ele ocupada toda a largura permitida do navegador, como elemento. Desta maneira, como ocupa toda a linha, quando qualquer outro elemento é criado posteriormente, o navegador pula para a próxima linha automaticamente, pois estará livre para ser ocupada.

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

Ao perceber isso, podemos visualizar que o `<span>` aparentemente não tem por padrão o `display: block` e assim, se comporta de outra maneira.

Mas afinal, porque estamos falando do elemento `p` e `span` ? No que isso vai te ajudar a parar de chutar como centralizar uma `div`?

# Vamos falar sobre as caixas

Quando olhamos a última foto, vemos que as mensagens estão envoltas por caixas.

Essa é a representação abstrata de todos os elementos que teremos dentro do nosso HTML, todos os elementos então envoltas de caixas. Quando usamos HTML/CSS, estamos manipulando essas caixas. 

Por isso é muito importante entender como funciona o navegador, conhecer algumas propriedades padrões que utilizamos frequentemente, desta maneira podemos brincar com os elementos e movimentá-los por todo o nosso navegador.

> A partir deste momento, eu vou usar div para representar as caixas, apenas com fins educacionais. Na vida real, não utilizem. As divs são péssimas pra acessibilidade, e nós queremos produzir serviços para que todos possam utilizar, correto?

Agora, vamos ver sobre a ideia de um site padrão, vamos precisar de:

- Um cabeçalho;
- Uma parte para o conteúdo
- Um menu lateral
- Um rodapé

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

## Mãos na massa

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

E ao olharmos o nosso navegador, será isto que veremos:

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

E, na prática, o comportamento está sendo como

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

Não é bem o que queremos certo? Quero observar o conteúdo e o menu lado-a-lado, se não, não faz sentido o meu site, meu site é padrão, não estou revolucionando o “design”. E agora?

Nós vimos lá em cima que por padrão a largura é 100%, e se nós diminuirmos a largura? Vai ter espaço, se vai ter espaço, os elementos poderão ficar lado-a-lado, da maneira que queremos.

Vou adicionar ao CSS, uma largura de 45% e colocar uma borda pra visualizarmos o que está acontecendo.

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

Vamos olhar o nosso navegador e…

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

Ué? Porque não está lado-a-lado? Tem espaço! Ah, CSS é impossível.

Calme-se! Se lembra do `display: block`? Então, nós só mudamos a largura dos elementos, de fato, tem espaço, mas continuam tendo o seu comportamento inicial, onde todo elemento posterior sempre começará numa próxima linha.

É por isto que os sites antigamente eram produzidos usando `tables` ou a grande mágica chamada `float`. 

Porque essa dor de cabeça hoje em dia, é facilmente resolvida com `flexbox` 💓.

# Float: o precursor da manipulação no navegador

O Float de certa maneira é problemático, porque essa **propriedade quebra o comportamento padrão do navegador**. 

Se por um momento temos tudo bem rígido e estruturado, o float não liga para as regras. Como o seu nome diz, essa propriedade faz os elementos flutuarem pelo navegador, e isso, se não estiver bem amarrado, pode dar muitas dores de cabeça.

Então vamos usar essa propriedade no nosso exemplo.

1. Primeiro, vamos escolher os elementos que queremos que flutuem
2. Em seguidas, aplicaremos a propriedade `float`
3. Vamos diminuir a largura destes elementos, afinal, a soma dos seus lados tem que somar no máximo 100% (esse é o tamanho máximo do navegador, é toda a sua dimensão).

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

Ao olharmos o navegador,

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

Olha só já temos um esboço, mas isso aqui **é um perigo**. 
No momento que declaramos para que a estrutura flutue, ela quebra toda a estrutura-padrão de como um navegador funciona. 

> Regras? Float não sabe o que é isso.

Se por alguma razão, eu decidir que as larguras sejam menor que 50%, vamos ver o que acontecerá.

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

Olhando o navegador…

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

🤬 **mas que p# é essa?**

Porque o rodapé tá flutuando também? Ele não é um `display: block` ? Este display não era pra sempre pular pra próxima linha e continuar a vida normal?

Bem-vindo, ao float!

Por isso, foi criado um clearfix para corrigir este problema.

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

Sempre na caixa seguinte aonde flutuamos os elementos, usamos o clear para que o HTML volte a ser o lugar rígido, estruturado e com regras como conhecemos.

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

E assim, conseguimos manipular caixas dentro do HTML

Desta maneira, mexendo um pouco ali e aqui, podemos criar um site simples e padrão, usando floats da maneira pretendida inicialmente.

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

Link: https://codepen.io/mpfdev/pen/XWZwMKg

## Entendendo algumas diferenças

Eu adicionei uma nova div para concentrar e organizar melhor o que será o conteúdo do site.

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

Mas esse é o comportamento abstrato da div class="todo-menu" afinal, porque isso está acontecendo?

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

O certo não era essa `caixa` cobrir as duas caixas que fazem parte dela?

É por esse motivo que eu não vou falar de Flexbox agora, primeiro temos que entender o comportamento das caixas dentro do navegador, pra então entender o comportamento entre caixas-pais e caixas-filhas.

Mas o motivo disso estar acontecendo, se dá de novo pelo `float`.

Toda caixa `div` tem por padrão uma `largura de 100%` (display: block) do espaço disponível, mas a altura, a altura depende do seu conteúdo.

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

Mas essas duas estruturas estão flutuando, e nem fazem mais parte do comportamento padrão do navegador. Desta maneira, embora na estrutura o `menu` e o `conteudo` sejam filhos do `todo-menu`, quando é renderizado, a caixa-pai não reconhece o seu filho.

E assim, a caixa `todo-menu` não tem conteúdo, então, não tem altura.

# Por hoje, é só.

Este é um primeiro contato bem resumido de como acontecem os comportamentos do HTML ao serem renderizados no navegador.

Num próximo post, pretendo falar sobre o modelo de caixas melhor, para criar uma base para entendermos Flexbox.

Se quiser ver meus posts antigos:

- **CS50: S1 | E o problema do Mario ([Link](https://dev.to/mpfdev/cs50-e-o-problema-do-mario-3hfg))** 🇧🇷
- **Lookbook with CSS Floats ([Link](https://dev.to/mpfdev/lookbook-with-css-floats-673))** 🇺🇸