DEV Community

Elisa Drumond
Elisa Drumond

Posted on

Boas Práticas CSS

É comum ouvir sobre boas práticas quando se estuda programação. O fato de existir diversas formas de se fazer algo exige que busquemos a melhor forma de expressar, em código, o que precisamos.

No CSS, há várias boas práticas que precisamos seguir para garantir alta legibilidade e facilitar a manutenção do nosso código.

Uso de classes

Use classes sempre que você for repetir a estilização. Mas não só de cores, aproveite as classes para setar alturas, disposição de elementos e aplique nas divs que precisam receber esses valores.

Classes - CSS

Variáveis

O uso de variáveis CSS é indispensável para qualquer projeto. Além de boa prática, facilita e muito quando precisamos alterar a cor de um elemento.

Basta criar na :root e todo o projeto terá acesso. Se você tiver muitas, pode optar em ter um arquivo só para elas.

Variáveis

Chamada de variáveis

Unidade de medida

Usar px para tudo dificulta na responsividade do seu projeto. As medidas flexíveis, como rem e em definem o tamanho de acordo com o tamanho de fonte dos elementos anteriores e pode, e deve, ser utilizada para garantir que o tamanho dos objetos seja compatível com a tela.

Ao usar rem, o tamanho do seu elemento vai ser o mesmo do tamanho da fonte definida no :root. 2rem, por exemplo, é 2x o tamanho da fonte. A mesma lógica vale para em, mas nesse caso, o valor a ser respeitado será do elemento pai.

Resetar estilos padrões

Estilo padrão é aquele que é definido pelo user agent do navegador e cada um possui o seu. Antes de iniciar a estilização, precisamos remover espaços, bordas indesejadas e qualquer estilização prévia que interfira no resultado final.

A dica aqui é criar um estilo padrão, que vai ser colocado em todos os projetos. Aqui eu deixo os indispensáveis, mas você pode complementar e em conjunto com o :root iniciar o seu projeto da melhor forma possível.

Estilo padrão


Esse é um post escrito por mim ✨❤️

E é o segundo de uma série de 4 posts sobre esse projeto. No próximo pretendo falar sobre os padrões CSS que uso.

Se você deseja adicionar algo, sugerir correção ou conversar sobre tecnologias e afins, pode me chamar no Instagram ou por e-mail no contato.elisadrumond@gmail.com

Top comments (0)