Como você pode melhorar o uso de margin's no css

Bom, recentemente tive um insight conversando com uma amiga, sobre margin e como ele afeta a aplicações em dispositivos.

Nesse artigo vou explicar como você pode trocar o margin e quando você deve realmente usar.

Margin é uma propriedade do CSS que define a margem de um elemento. Pode ser usada para criar espaçamentos entre elementos.

Mesmo que pareça uma boa ideia usar margin para criar espaçamentos, o uso excessivo de margin leva a problemas de layout e uma dificuldade de manutenção. Vou listar algumas razões pelas quais você pode querer evitar o uso de margin.

Pode ser difícil prever como a margem irá afetar o layout da página. A margem de um elemento pode afetar não só o elemento em questão, mas também os elementos vizinhos. Isso pode levar a layouts desajustados e difíceis de entender.
Pode ser difícil ajustar o layout quando o margin é usado em muitos elementos. Se você estiver usando margin em muitos elementos da sua página, pode ser difícil ajustar o layout global quando algo não estiver funcionando como o esperado.
O uso excessivo de margin pode tornar o código difícil de ler e manter. Quando há muitas declarações de margin em um código, pode ser difícil entender o que está acontecendo e como ajustar o layout se necessário.

Em vez de usar margin, é geralmente uma boa ideia usar outras técnicas para criar espaçamentos, como padding e grid layout. Essas técnicas podem ser mais fáceis de prever e ajustar, além de deixar o código mais limpo e fácil de manter.

Vou mostrar exemplos do mesmo elemento com e sem gap.

Nós temos esses três cards, com espaçamentos iguais e divididos.

<div class="block-content block-content-full">
  <div class="d-flex flex-column align-items-center align-self-center justify-content-center">
    <v-icon class="text-oderco" name="hi-upload" scale="2" />
    <span style="font-size: 14px" class="fw-bold text-black mt-3">Solte ou Arraste o arquivo</span>
    <button class="btn btn-primary btn-lg mt-3 card__button"> Buscar neste computador </button>
    <span style="font-size: 12px" class="mt-3">Arquivos Suportados: PDF, PNG, JPG</span>
  </div>
</div>

Esse código remete ao card do meio.

Podemos notar no código acima o uso de mt que é ao equivalente você escrever margin-topusando css. Você pode notar que em três elementos você tem o uso de margins com as mesmas margens entre elas, isso é ruim por motivos de utilização em múltiplos dispositivos (principalmente mobile) e você pode ter o problema de quebrar o elemento diversas vezes, isso dificulta na manutenção.

Agora vou mostrar o mesmo código, mas usando flex e gap.

<div class="block-content block-content-full h-100">
  <div class="d-flex flex-column gap-4">
    <span class="fw-bold text-oderco-darker">Valor Nota Fiscal de Serviço</span>
    <h2 class="fw-bold text-oderco">R$ 660,00</h2>
    <div class="row">
      <span style="font-size: 12px; color: #6e6e6e">
        <span class="fw-bold">Valor Liquido:</span> R$ 650,00 (IRRF 1,5%) </span>
      <span style="font-size: 12px; color: #6e6e6e">
        <span class="fw-bold">Vence em:</span> 26/02/2022 </span>
    </div>
  </div>
</div>

Mesmo código, mas com uso de gaps, você pode notar que não temos nenhum margine obtemos o MESMO resultado esperado. No caso dessa aplicação o gaprepresenta 16px.

Bom, mas e quando devemos usar margin? Usamos quando não precisamos de flexe grid, com elementos totalmente separados e específicos. Mas geralmente gapvai resolver todos os seus problemas.

Deixo esse video do Web Dev Simplified, onde ele comenta do mesmo assunto.

Web Dev Simplified