Como utilizar @import em um arquivo CSS?

Neste artigo vamos aprender como utilizar @import em um arquivo CSS, da maneira correta e também algumas dicas para o bom funcionamento do mesmo.

Fala programador(a), beleza? Bora aprender como usar o @import! 😀

As vezes precisamos importar fontes para o nosso arquivo CSS, então isso pode ser feito via a propriedade especial@import

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Uma regra que devemos ter em mente é que a cláusula de @import deve ser sempre a primeira no código

Essa é a maior fonte dos problemas, misturar estilos a elementos com ela, deixando a importação inútil

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Então para funcionar corretamente devemos fazer assim:

@import('https://fonts.googleapis.com/css?family=Titillium+Web');

body {
  font-family: 'Titillium Web', sans-serif;
}

Desta maneira o @import vai funcionar corretamente!

Seguindo estes passos você nunca mais passará raiva com o import! 😀

Lembrando que há quem diga que import é uma má prática, eu também evito de utilizar

Sempre que há a possibilidade de utilizar a tag link no head do HTML

Eu opto por esta abordagem, um grande ponto é que todos já estão acostumados com isso e centraliza os imports de todos os arquivos do projeto lá

Facilitando a manutenção e o controle do projeto

Outro impacto é na performance, pois um import faz o navegador esperar até que o download da folha de estilo tenha terminado

Conclusão

Neste artigo vimos como utilizar @import em um arquivo CSS de forma correta

Para isso é necessário que a importação fique na primeira linha do arquivo, antes de qualquer regra

Caso contrário, a regra será inutilizada e você não poderá utilizar o que queria importar

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube