Dúvida sobre CSS e formas de organização do código

[AnaVargasF]

Olá, tudo bem?
Estou estudando CSS e surgiu uma dúvida.

É muito comum sites que possuem várias páginas terem o cabeçalho igual em todas elas.
Então:

1. Eu posso fazer uma folha de CSS só para o header e chamar essa folha em todas as páginas? Ou cada página HTML precisa ter só uma folha CSS?
2. Eu preciso copiar o código HTML do header em todas as páginas ou tem uma forma de fazer só uma vez usando HTML e CSS?

Obrigada pela ajuda,
até mais.

[eduardosoareszup]

Bom dia Ana, tudo bem e contigo?

Entãooo, vai depender da tecnologia que você está usando. Você está criando páginas estáticas? (um HTML para cada página) ou você está usando um framework SPA? (Angular, Vue, React).

No caso de páginas estáticas a galera usa muito pré-processadores, por causa de uma série de 'poderes' que eles nos proporcionam, os principais são SASS, LESS e Stylus. Neles a galera costuma separar em vários arquivos e pastas, porque facilita a organização. Maaas nada impede de você usar CSS mesmo e continuar separando em várias pastas e arquivos e no fim contar com a ajuda de um automatizador de tarefas como Webpack por exemplo, para juntar tudo isso em um arquivo só e minificar.

Mas porque juntar em um só arquivo? O que é minificar? Talvez você se pergunte sobre isso.

Normalmente juntamos em um só arquivo para tornar o processo de transferência de dados do nosso servidor para o cliente mais rápido, se separarmos em vários arquivos acaba que se torna necessário várias requisições para ter o mesmo resultado, consequentemente tende a demorar mais.

A minificação segue a mesma linha de raciocínio, mas no caso é deixar todo o código CSS em praticamente 1 linha, claro isso se torna quase inviável a manutenção por humanos, mas para a máquina é sensacional, porque reduz muito o tamanho do arquivo.

No fim normalmente temos um arquivo com o nome index.min.css ou algo do tipo e usamos ele em praticamente em todas as páginas. Temos exceções quando esse arquivo começa a ficar muitooo grande e atrapalhar o carregamento, nesse caso já é indicado identificar os gargalos, talvez eu tenha uma página que seja responsável por 40% do tamanho dele, nesse caso seja o ideal separar um arquivo só para essa página e por ai vai.

Agora se você está usando um framework SPA você não irá precisar se preocupar muito com isso, basta separar talvez em um componente e criar todos os estilos dele lá, porque no final ele irá fazer esse processo de minificação e junção em arquivos de forma automatizada por você.

[AnaVargasF]

Olá, tudo certinho por aqui.

Entendi.
Eu ainda não comecei a estudar nenhum framework.
Vi na apostila, que estou usando como base, que SASS e LESS são capítulos mais avançados. Então é só continuar os estudos.

Muito obrigada, sua explicação foi muito boa. Me ajudou bastante.