Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida: organizando o CSS

Boa noite, pessoal.

Já faz um tempo que venho estudando HTML e CSS, não só pelo ALURA, e sempre fico na dúvida em como organizar o código CSS. Por exemplo, existe alguma ordem correta (boas práticas) para a sequência de tags que vamos formatando? Essa sequência deveria seguir a mesma sequência em que as tags aparecem no arquivo HTML? Não sei se é uma coisa a se preocupar agora, pois inclusive já vejo alguns problemas nisso, pois como se é usado apenas um arquivo CSS para formatar o estilo de mais de uma página HTML, essa sequência talvez não seja a mesma em cada página. (Vocês estão conseguindo me entender?)

Outra dúvida: o exercício pede para que a cor do texto do FOOTER seja a mesma da usada no texto do menu (#F2FFFC), então, como tive que fazer uma formatação separada apenas para o texto do menu: nav a { color: #F2FFFC} Aproveite essa mesma formatação e apenas adicionei ao FOOTER: nav a, footer { color: #F2FFFC} Está correto fazer dessa forma também?

Agradeço antecipadamente.

4 respostas
solução!

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 é utilizar
    footer, 
    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 :)

Caramba, Allan, muito obrigado mesmo, cara. Poxa! Que resposta perfeita!! Super completa! Não sei nem como agradecer. Vou até salvar no meu favoritos. ;) Eu ainda quero entender melhor o uso de pseudoseletores. Já vi em algum livro que li, mas não captei muito bem. Não sabia que era tão útil assim. Tô curtindo demais o Alura por causa disso, pois agora tenho uma visão melhor do que a galera realmente usa. Vou seguir seus conselhos e depois fazer um curso de LESS e SASS. Valeu, irmão. o/

Se ainda puder te indicar um bom livro sobre HTML e CSS, indico esse que é o HTML&CSS: Projete e Construa Sites.

Ele também aborda questões como leitores de tela para pessoas cegas e acessibilidade para pessoas surdas.

O bacana é que o livro é inteiramente visual!

Além dessas questões, você pode começar a buscar cursos como Javascript, que é essencial, começando por lógica de programação e tudo mais.

Que bom que ajudei!! FIco muito feliz!!

Allan, mais uma vez, MUITÍSSIMO OBRIGADO. Vou olhar agora mesmo o livro recomendado. Eu até já comecei a fazer o curso de JS, e já deu pra sentir o poder da linguagem, mas tive que voltar a fazer o de HTML+CSS pois já tinha esquecido muita coisa (não o básico, mas as coisas mais complicadas) de CSS. :(