Dicas de ouro em CSS

Dicas de ouro em CSS

AB
Aylan Boscarino
Compartilhar:

Cascading Style Sheet, ou CSS para os mais íntimos, é a linguagem para estilo de páginas da Internet aceita em todos os navegadores modernos. Introduzida pelo navegador Netscape nos primórdios da Web, CSS tem uma história bem longa e uma reputação de ser uma linguagem impiedosa com desenvolvedores iniciantes.

Seja para alinhar um elemento no centro de um container ou construir um layout responsivo com elementos que se adaptem ao tamanho da tela, é bem provável que você já tenha tido algum tipo de dificuldade ao interagir com a linguagem quando precisou realizar alguma tarefa bem específica, por isso neste artigo você ver algumas dicas que podem deixar o seu trabalho com CSS muito mais intuitivo e agradável.

Iremos introduzir alguns conceitos fundamentais da construção de páginas web sem nos aprofundarmos muito em suas particularidades, estes são:

  • O Box Model, ou modelo de caixas, de elementos HTML.
  • O layout de caixas flexíveis (Flexbox) para disposição de elementos entre si.
  • A exibição do layout em grades (Grid Layout).
  • A utilização de variáveis em CSS.

Entendendo o Box Model CSS (modelo de caixas)

O Box Model é um conceito fundamental de como o CSS opera com o HTML na organização e distribuição dos elementos em uma página, podemos começar visualizando cada elemento do seu HTML como uma caixa, por exemplo vamos usar o seguinte código:

<html>
  <body>
     
    <nav>🐦</nav>

     
    <div>🐱</div>

     
    <article>🐶</article>
  </body>
</html>

Podemos visualizá-lo como um aglomerado de caixas respeitando a seguinte ordem:

Visualizando o Box Model

Cada caixa possui um conteúdo (content), uma largura (width) e uma altura (height), essa caixa pode conter um espaçamento interno que diminui o espaço do conteúdo, uma borda que delimita a caixa e uma margem de espaço entre outras caixas. O conteúdo de uma caixa é sua própria caixa e pode conter seu próprio conteúdo e assim por diante.

Tudo o que envolve o layout de uma página Web funciona a partir do Box Model, então trabalhar com CSS tendo isso em mente se torna muito mais intuitivo. O Box Model é tão enraizado que é possível visualizar o modelo de cada elemento da página diretamente pelas ferramentas de desenvolvedor dos navegadores:

Anatomia de uma caixa

No Google Chrome você consegue visualizar clicando com o botão direito do mouse em um elemento e selecionando inspecionar, em seguida selecionando as abas Element e Computed nesta ordem.

Como Flexbox CSS pode facilitar sua vida

Propriedades de layout são frequentes fontes de problemas para desenvolvedores Web iniciantes, que se pegam tendo dificuldades com tarefas simples como centralizar um elemento dentro de um container, ou fazer com que três elementos cresçam ou diminuam com o tamanho da tela mantendo uma proporção equivalente. Felizmente o CSS moderno conta com a propriedade Flexbox, ou layout flexível, que simplifica esses problemas e muitos outros.

Tudo começa quando declaramos um elemento como flexível, fazemos isso no código CSS adicionando a propriedade display: flex a um elemento, no exemplo a seguir usaremos uma div de classe container com uma largura, uma altura e uma cor para facilitar a visualização no navegador:

<html>
  <style>
     .container {
         width: 100px;
         height: 50px;
         background-color: grey;
         display: flex;
    }
  </style>

  <body>
     
    <div class="container">
         
      <div>🐦</div>
         
      <div>🐱</div>
         
      <div>🐶</div>
       
    </div>
  </body>
</html>

Ao definirmos a classe container como flex estamos dizendo ao navegador que seus elementos devem ser organizados em uma caixa que possui um eixo principal (horizontal) e um eixo secundário (vertical). Por padrão os elementos começarão no início de cada eixo e, portanto, no canto superior esquerdo:

Elemento Flexbox com alinhamento original

Podemos então definir o alinhamento dos elementos filhos da caixa flexível no eixo principal a partir da propriedade justify-content, na ilustração a seguir definimos o valor center para centralizar os elementos no eixo:

Elemento Flexbox com eixo principal alinhado ao centro

E para alinhar os elementos filhos no eixo secundário usamos a propriedade align-items que também pode receber o valor center para centralizar completamente os elementos referente ao container:

Elemento Flexbox com eixo principal e eixo secundário alinhados ao centro

Código de exemplo fica com apenas duas linhas a mais:

<html>
  <style>
     .container {
       width: 100px;
       height: 50px;
       background-color: grey;
       display: flex;
       justify-content: center;
       align-items: center;
     }
  </style>

  <body>
     
    <div class="container">
         
      <div>🐦</div>
         
      <div>🐱</div>
         
      <div>🐶</div>
       
    </div>
  </body>
</html>

CSS Grid Layout: simplifique seu layout

Flexbox é um recurso muito poderoso para a construção de layouts responsivos na maior parte das vezes, porém existem cenários para os quais usar Flexbox se torna muito trabalhoso e pouco eficiente. É o caso de leiautes com uma grade de elementos uns dos lados dos outros.

Grid Layout é um recurso que o CSS nos fornece para organizarmos elementos como uma grade de itens, a primeira coisa que precisamos fazer é descrever uma caixa como uma grade adicionando a propriedade display: grid no seletor da caixa que será usada como container. Vejamos o exemplo a seguir:

<html>
  <style>
    .container {
      width: 80px;
      height: 150px;
      background-color: grey;
      display: grid;
    }
  </style>

  <body>
    <div class="container">
      <div>🐦</div>
      <div>🐱</div>
      <div>🐶</div>
      <div>🐹</div>
      <div>🐱</div>
      <div>🐶</div>
    </div>
  </body>
</html>

Definimos o elemento container como um grid então automaticamente essa caixa se comporta como uma grade com uma única coluna e organiza seus elementos filhos um abaixo do outro:

Elemento Grid com uma coluna

A seguir iremos declarar o número de colunas do grid utilizando a propriedade grid-template-columns que aceita como valor as larguras de cada coluna separadas por espaço, sendo assim se declararmos  grid-template-columns: auto auto; estamos dizendo ao CSS para organizar os elementos filhos do container em duas colunas e escolher seu tamanho automaticamente.

Exemplo:

<html>
  <style>
     .container {
       width: 80px;
       height: 150px;
       background-color: grey;
       display: grid;
       grid-template-columns: auto auto;
     }
  </style>

  <body>
     
    <div class="container">
         
      <div>🐦</div>
         
      <div>🐱</div>
         
      <div>🐶</div>
         
      <div>🐹</div>
         
      <div>🐱</div>
         
      <div>🐶</div>
       
    </div>
  </body>
</html>

Ilustração:

Elemento Grid com duas colunas

Não há um limite máximo para a quantidade de colunas definidas por essa propriedade e toda a disposição dos elementos listados é feita automaticamente.

Variáveis em CSS

Uma das primeiras coisa que uma pessoa programadora aprende é a evitar repetição de códigos e de valores espalhados avulso nos arquivos, em CSS isso não seria diferente, a linguagem suporta nativamente o uso de variáveis para reaproveitar valores como cores, tamanhos e o que mais for preciso.

Por exemplo, vamos supor que tenhamos um site cuja cor primária seja #43AC0D e precisamos que ela seja replicada em vários elementos no decorrer das nossas páginas. A forma mais óbvia seria associar a cor nos seletores dos elementos que a utilização:

.primary-button {
   background-color: #43AC0D;
 }
 .highlighted-text {
   color: #43AC0D;
 }

Não demora muito até isso virar um problema, conforme mais arquivos CSS são adicionados ao site mais vezes teremos que copiar o valor da cor pelos arquivos e quando precisarmos mudar essa cor será preciso fazer uma varredura por cada arquivo que a utiliza.

Declaramos uma variável em CSS de forma parecida como definimos uma propriedade, a principal diferença é que a variável precisa ser precedida por dois traços (--). Consumimos uma variável executando a função var passando o nome da variável como parâmetro. Aplicando ao nosso exemplo:

:root {
   --primary-color: #43AC0D
 }
 .primary-button {
   background-color: var(--primary-color);
 }
 .highlighted-text {
   color: var(--primary-color);
 }

Como muita coisa em CSS as variáveis cascateam, então se for compartilhar as variáveis em múltiplos documentos é uma boa ideia deixar na pseudo-classe :root

E para seguir bem informado sobre tecnologia e como se desenvolver na sua carreira, continue acompanhando o blog da TechDegree