Por que usar @charset "UTF-8"; no CSS?

O @charset "UTF-8"; define a codificação de caracteres do arquivo CSS. Sua principal função é garantir que o navegador interprete corretamente caracteres especiais (como acentos, emojis ou símbolos) presentes no código CSS. Veja os detalhes:

1. Para que serve?

• Evitar erros de renderização:
  Se o CSS contém caracteres não-ASCII (ex: ã, ç, →, ❤️), sem a declaração @charset, o navegador pode exibir caracteres incorretos ou "quebrados".
• Compatibilidade com múltiplos idiomas:
  UTF-8 suporta quase todos os caracteres de idiomas modernos, ideal para projetos multilíngues.

2. Quando é necessário?

• Seu CSS inclui caracteres especiais:
  Exemplo: content: "✔️"; em pseudoelementos ou comentários com acentos (/* Menu de navegação */).
• O servidor não define a codificação:
  Se o header HTTP não especifica Content-Type: text/css; charset=UTF-8, o @charset resolve ambiguidades.
• Arquivo salvo em UTF-8:
  Se o arquivo CSS foi salvo com essa codificação (comum em editores como VS Code), a declaração reforça a interpretação correta.

3. Como usar?

• Deve ser a primeira linha do arquivo CSS, sem espaços antes:

  @charset "UTF-8";
  body { font-family: Arial, sans-serif; }
  

• Se houver qualquer caractere antes (incluindo espaços ou comentários), a declaração será ignorada.

4. Exemplo Prático

Cenário sem @charset:
Se você escrever:

.tooltip::after { content: "Atenção: campo obrigatório!"; }

E o navegador interpretar o arquivo como ISO-8859-1, o "ç" pode aparecer como ç.

Cenário com @charset:
O navegador renderiza os caracteres corretamente.

5. Observações

• Não é sempre obrigatório:
  Muitos navegadores assumem UTF-8 por padrão, especialmente se o HTML já declara <meta charset="UTF-8">.
• Alternativa:
  Configurar o servidor para enviar o header Content-Type: text/css; charset=UTF-8, dispensando o @charset.

Resumo

Use @charset "UTF-8"; no CSS quando:
✅ O arquivo contém caracteres não-ASCII.
✅ Não há garantia de que o servidor defina a codificação correta.
✅ Você quer evitar riscos de compatibilidade em ambientes desconhecidos.

É uma boa prática para projetos profissionais, especialmente em equipes ou sistemas com múltiplos idiomas! 🌍