1

Gostaria de saber quanto ao uso do @import para importar folhas de estilo dentro de uma outra folha de estilo, como por exemplo:

Dentro do arquivo style.css:

@import url("css/layout.css");

body{
    background: #F0F0F0;
}

.container{
    width: 80%;
    margin: 0 auto;
... 
}
  • Preciso declarar algo mais para que possa usar os estilos do layout.css, como no HTML por exemplo?

  • Fica mais lento o carregamento de páginas dessa forma em relação a declaração direta no head?

1
  • O uso do @ import pode trazer um impacto negativo na performance do seu site. De acordo com um post de Steve Sounders, ao contrário do tag <link>, se você tem múltiplos comandos @ import em sequência, eles podem não ser carregados em paralelo no momento em que a sua página é aberta. Fonte pt.stackoverflow.com/questions/8763/…
    – user60252
    21/05/2017 às 17:35

1 Resposta 1

-1

De acordo com o site da Mozilla, todas estas formas estão corretas:

Exemplos

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

Algumas formas já incluem o media query incluso para definir se o CSS será somente para algum tipo específico de tela ou para impressão.

Como já foi dito, esta forma não é o ideal de se importar uma folha de estilo e deve ser usado somente em último caso. A melhor forma de linkar folhas de estilo, ainda é pelo <head> do html.

Você deve fazer log-in para responder a esta pergunta.