5 dicas simples de CSS

Olá leitor, seja muito bem-vindo ao UC, este é o meu primeiro post e nele gostaria de abordar algumas dicas simples para melhor utilização do CSS no dia a dia.

Nós, como bons programadores/desenvolvedores, temos certos conceitos na ponta da língua, no entanto, para alguns faltam as habilidades para se criar um bom front-end.

Por este motivo resolvi trazer algumas dicas para que você possa construir um código CSS mais limpo e mais inteligente para reutilizá-lo em outros projetos. A seguir vão 5 dicas que quero apresentar para vocês.

Não sobrescreva suas regras CSS

Você já deve ter passado por essa situação, supomos que exista o seguinte botão no seu código HTML:

<input type="button" value="Botão Exemplo" onclick=”algumaLogica()” class="classe-css">

Observe que este botão já possui a classe “classe-css”, agora imagine que no seu arquivo CSS você tenha essa classe com as seguintes especificações:

.classe-css {
      display: inline-block;
      float: left;
}

Então, para ajustar o botão em um caso particular, você precisou colocar “float: none” ou “width: auto”, isso é uma prática ruim, pois você deixa de fazer uso dos padrões do navegador tendo em vista que todo float já é none e todo width já é auto. Evite isso, deixando somente os atributos que realmente precisam ter seu valor modificado (float: left, width:100px…) e os demais herdam o valor por padrão.

Use Classes para reaproveitar o código

Esta dica é clássica. Quando for colocar estilos em um determinado elemento, verifique se é possível criar uma classe para poder reaproveitar esses estilos, pois se precisar alterá-lo no futuro terá que mudar em apenas um lugar, outra vantagem de utilizar classes é que seu código ficará muito mais organizado e fácil de entender.

Evite valores negativos

Que atira a primeira pedra quem nunca fez isso, eu mesmo já fiz muitas vezes e posso dizer que isso sempre causa problemas, mesmo parecendo que o problema foi resolvido. Ao utilizar por exemplo “margin-top: -50px” para posicionar um item, quando você ou o usuário visualizarem este item em outros navegadores, irão notar uma posição completamente diferente, por isso evite utilizar posições negativas.

Nomeie seus Id’s com cuidado

Não crie Id’s com nomes como “coluna-centro” essa não é uma boa prática, pois se houver alguma alteração e seu layout posicionado no centro mudar para a direita, você provavelmente não irá mudar o id e isso trará confusões no futuro, por isso é bom evitar nomes baseados nas posições dos itens.

Prefira utilizar tag’s apropriadas

Quando seus textos apresentarem variações tipográficas, ao invés de criar div’s ou span’s e aplicar estilos para essas partes do texto, utilize as tag’s apropriadas, como por exemplo <strong> no trecho em negrito, e aplique os demais estilos que este trecho exige, isso faz com que seu código não fique poluído.

Utilize a forma abreviada

Talvez você não saiba, mas é possível abreviar as declarações de propriedades como margin, padding e border na ordem horária a partir de top: top, right, bottom e left. Veja:

div {
  margin-top:5px;
  margin-right:3px;
  margin-bottom:10px;
  margin-left:6px;
}

É o mesmo que:

div {
  margin: 5px 3px 10px 6px;
}

Declare as unidades com cuidado

Ao trabalhar com valores diferentes de zero e declarar as unidades (px, pt, etc.), cada navegador irá assumir uma unidade padrão quando não especificarmos, gerando resultados diferentes.

Bom pessoal essas são as dicas, até o próximo post!

Compartilhe!