Saudações!
Vejo que a professora Mônica usou a importação de outros arquivos css usando o @import como o banner, contato, header, etc, para o style.css, no entanto na hora de importar as fontes ela usa a tag ao invés do @import, achei isso estranho e gostaria de saber qual é a atual boa prática ou o que é mais correto? Desde já, agradeço.
Olá Rafael! Tudo bem?
Que legal ver que você está atento a esses detalhes de organização do código. Provavelmente a escolha da instrutora de usar a tag <link> no HTML para as fontes, enquanto utiliza o @import para os arquivos CSS, deve-se a performance e na forma como o navegador processa a página.
Quando inserimos o link do Google Fonts diretamente no index.html, o navegador consegue identificar e começar a baixar a fonte Josefin Sans ao mesmo tempo em que baixa os seus arquivos de estilo. Se usássemos o @import dentro do CSS para a fonte, o navegador teria que primeiro carregar todo o seu arquivo styles.css para só então descobrir que existe uma fonte externa necessária, o que criaria uma fila de espera e deixaria o carregamento mais lento.
Portanto, a boa prática atual recomenda usar o <link> no HTML para recursos externos pesados, como fontes, para garantir que o texto não apareça com uma fonte padrão antes da correta carregar.
Já o uso de múltiplos arquivos CSS, como o header.css , serve para manter o seu projeto modular e fácil de organizar, como ao aplicar a metodologia Mobile First e as Media Queries para telas maiores. Assim, você une o melhor dos dois mundos: um site rápido para o usuário e um código organizado para quem desenvolve.
Espero ter ajudado.
Qualquer dúvida que surgir, compartilhe no fórum. Abraços e bons estudos!
Sugestão de conteúdo:
ARTIGO