Boas práticas CSS | HTML5 e CSS3 I: Suas primeiras páginas da Web

Boa tarde,

Finalizei o curso e agora irei tocar um projeto interno aqui da empresa. Porém estou com algumas dúvidas referente a boas praticas de organização dos arquivos e boas práticas de css. Seguem 4 dúvidas:

1: Qual a forma vocês me recomendam para organizar meus arquivos? Posso criar uma pasta chamada "assets" e dentro dela ter uma de "css" e outra de "js"?

2: Pensando que terei diversas páginas, e o header e footer são arquivos que vão se replicar em todas as páginas, eu poderia criar um arquivo chamado "default.css" e centralizar dentro desse arquivo tudo o que for em comum nas demais páginas?

3: Supondo que eu tenha 5 telas, seria uma boa pratica um arquivo css por página, ou um aquivo contendo as 5 telas?( pensando em performance de carregamento de arquivos)

4: Ultima dúvida, na hora de escrever o css, qual a melhor ordem para especificar meus seletores de um elemento?

Obrigado a todos :)

Oii Bruno!!

Boas perguntas! Organizar o projeto é um pouco difícil justamente por estas decisões que temos que tomar.

1.Em sites pequenos, geralmente eu deixo na raiz do projeto as pastas css (ou scss, ou less), js, img e uma pasta assets onde vai o código compilado dessas pastas (quando usamos pré-processadores de css, js, imagens etc), a pasta assets acaba nem indo para o versionamento (depois veja o curso de Git), porque ali só tem o código gerado automaticamente.

2.Sim, geralmente sempre tem um arquivo com coisas em comum, você pode por um nome que tenha um significado óbvio para isto, pode ser default, main, general. Porém o header e o footer eu ainda costumo separar, pois dependendo, pode ter bastante código neles. É legal entender como projetos open source organizam seus arquivos para tomar de base. Com trabalhei bastante com Wordpress e Magento, eu estou acostumada a seguir uma lógica parecida. No Github você também pode encontrar alguns projetos para poder basear sua decisão.

3.Sim, eu costumo separar por tela meus arquivos.

4.Eu gosto de ir por sequencia mesmo, se primeiro vem o título, os primeiros estilos são do título... e assim vai. Você pode dar uma olhada também em padrões de escrita de CSS como SMACSS, BEM, etc.

Espero ter ajudado!