É 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.
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.
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.
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)