Alysson, seguinte, ñao apenas tem que ser pensado de agora, como devem ser aplicadas agora as boas práticas.
O CSS tem que ter o mínimo de elementos possíveis para poder funcionar melhor nas requisições http do navegador
Para melhorar seu CSS o ideal é:
- Manter propriedades simples agrupadas:
Exemplo: Em vez de fazer
footer{
color: red;
}
aside{
color: red;
}
h1{
color: red;
}
p{
color: red;
}
O correto é utilizarfooter,
aside,
h1,
p{
color: red
}
E manter as propriedades únicas da tag a ser estilizada em classes separadamente ou em ID
- Sobre o uso das classes: torne elas o mais reutilizáveis que for possível.
Da mesma maneira que é verdade no código acima, você pode criar classes mais simples em vez de repetir várias vezes a mesma propriedade:
.classe4{
text-align: center;
}
.classe3{
text-align: center;
}
.classe2{
text-align: center;
}
.classe1{
text-align: center;
}
Desse jeito aqui:
.classe4,
.classe3,
.classe2,
.classe1{
text-align: center;
}
O melhor das classes é que elas podem ser reutilizadas em vários lugares. Essa prática é comum em frameworks CSS como Skeleton, Foundation, Bootstrap ou Materialize.
Procure manter as ID's voltadas para o Javascript ou apenas para estilizações muito pontuais.
Apenas use ID quando for para referenciar o DOM para o JS ou se o estilo for único daquele elemento. DO contrário, usa classes.
Evite as gambiarras no CSS: alguns pseudoseletores ajudam muito na hora de estilizar elementos individualmente: nth-child(), ~ ou > são seletores que evitam que você gaste uma classe com um elemnto que não precisa dela. Digamos que você tem uma lista com 5 linhas e queira estilizar apenas a quarta linha. Em vez de utilizar uma classe, você utilizar o nth-child que vai escolher exatamente aquele elmento para você.
Animações: sempre utilize as animações e transições no CSS em vez do JS, pois o CSS é mais leve e tem como foco a estilização da página: mas lembre se de sempre prefixar aquelas que não tem suporte em navegadores mais novos.
Padronização de escrita: É um padrão não usarmos as propriedades alinhadas em linha quando se tratam de diferentes no CSS. No seu caso, você fez tudo certinho, sim. Mas se quiser um código bem legível, sempre que separar CSS por vírgula, pule uma linha:
footer,
nav a{
color; gray;}
Isso ajuda a organizar o código.
Essas são apenas algumas dicas para começar a grande tarefa de fazer um CSS eficiente e legível. Utilizar as propriedades como você utilizou são o caminho certo: daquela maneira você evita repetir código e economiza em tamanho do arquivo.
Para melhorar ainda mais a padronização e utilização de classes e ID, bem como uma melhora em produtividade, sugiro o curso de Less ou Sass aqui da Alura.
Espero ter ajudado :)
