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
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