Verificação HTML: CSS: @import não é permitido após qualquer declaração válida exceto @charset e @import.

Sobre este problema de CSS

A regra @import permite-lhe importar estilos de outro ficheiro CSS. De acordo com a especificação CSS, as regras @import devem preceder todas as outras at-rules (exceto @charset) e todas as regras de estilo. Quando um browser encontra um @import após outra declaração CSS válida, ignora silenciosamente a importação. Isto significa que os estilos que pretendia carregar simplesmente não serão aplicados, o que pode levar a layouts quebrados ou designs em falta que são difíceis de depurar.

O validador W3C deteta este problema de ordenação e sinaliza-o porque o @import mal colocado não terá efeito. Embora os browsers não lancem um erro visível, a folha de estilos importada é completamente descartada, fazendo com que este seja um problema funcional real e não apenas um aviso de validação cosmético.

A ordem correta dentro de um elemento <style> ou ficheiro CSS é:

@charset (se necessário, e apenas em ficheiros CSS externos)
Regras @import
Todas as outras regras CSS (@font-face, @media, regras de estilo, etc.)

Exemplos

Incorreto: `@import` após uma regra de estilo

<style>
  body {
    margin: 0;
  }

  @import url("typography.css");

  h1 {
    color: navy;
  }
</style>

O @import está colocado após a regra body, pelo que o browser irá ignorá-lo completamente. Os estilos de typography.css nunca serão carregados.

Incorreto: `@import` após outra at-rule

<style>
  @font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2");
  }

  @import url("reset.css");
</style>

Embora @font-face seja uma at-rule, não é @charset ou @import, pelo que colocar @import após ela é inválido.

Correto: regras `@import` primeiro

<style>
  @import url("reset.css");
  @import url("typography.css");

  @font-face {
    font-family: "MyFont";
    src: url("myfont.woff2") format("woff2");
  }

  body {
    margin: 0;
  }

  h1 {
    color: navy;
  }
</style>

Todas as regras @import aparecem antes de qualquer outra declaração, pelo que são válidas e as folhas de estilos importadas serão carregadas corretamente.

Correto: múltiplas regras `@import` com `@charset`

Num ficheiro CSS externo, você pode também ter uma declaração @charset. Esta deve vir primeiro, seguida pelas regras @import:

@charset "UTF-8";
@import url("base.css");
@import url("components.css");

body {
  font-family: sans-serif;
}

Alternativas ao `@import`

Embora corrigir a ordenação resolva o erro de validação, vale a pena notar que @import em CSS pode causar problemas de desempenho porque os ficheiros importados são carregados sequencialmente em vez de em paralelo. Considere estas alternativas:

Múltiplos elementos <link> no <head> do seu HTML — estes permitem aos browsers descarregar folhas de estilos em paralelo.
Ferramentas de bundling CSS — ferramentas de build como Webpack, Vite, ou PostCSS podem combinar múltiplos ficheiros CSS num só no momento da construção, eliminando a necessidade de @import em tempo de execução.

Se você usar @import, apenas certifique-se de que cada instância aparece no topo da sua folha de estilos, antes de qualquer outra regra CSS.