Layer | CSS

• Layer | CSS

success

@layer serve pra dizer a ordem em que o navegador deve aplicar estilos, quando há conflito.

Ele é tipo um "nível de prioridade".

A diretiva @layer no CSS é usada para organizar e controlar a ordem de prioridade entre diferentes blocos de estilos, especialmente quando se trabalha com CSS moderno (como Tailwind CSS) ou quando há muitos estilos provenientes de diferentes fontes (por exemplo, bibliotecas, componentes e estilos próprios).

---

@layer

🧩 O que faz @layer

@layer permite definir camadas de estilos. Cada camada tem uma prioridade específica: quando duas regras têm a mesma especificidade, o CSS usa a ordem das camadas para decidir qual aplicar.

Exemplo básico:

@layer reset, base, components, utilities;

Isso declara quatro camadas (mas ainda não define estilos nelas). Depois, você pode colocar regras dentro de cada uma:

@layer reset {
  * {
    margin: 0;
    padding: 0;
  }
}

@layer base {
  body {
    font-family: sans-serif;
  }
}

@layer components {
  .card {
    background: white;
    border-radius: 8px;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

---

⚙️ Como funciona a prioridade

A ordem em que as camadas são declaradas (não definidas) determina sua prioridade. No exemplo acima:

1. reset é aplicado primeiro,
2. depois base,
3. depois components,
4. e por último utilities.

👉 Se duas regras tiverem a mesma especificidade e atingirem o mesmo elemento, vence a camada declarada por último.

---

💡 Exemplo prático

@layer base, theme;

@layer base {
  h1 {
    color: black;
  }
}

@layer theme {
  h1 {
    color: red;
  }
}

Resultado: O h1 fica vermelho, porque theme vem depois de base na declaração das camadas.

---

🧱 Uso comum no Tailwind CSS

O Tailwind usa @layer internamente para separar seus estilos:

@tailwind base;
@tailwind components;
@tailwind utilities;

Você pode adicionar seus próprios estilos dentro dessas camadas para manter a mesma hierarquia:

@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
  }
}

---

📘 Resumo

Conceito	Explicação
@layer	Define camadas de estilos para controlar a prioridade.
Ordem das camadas	A última camada declarada tem maior prioridade.
Usado em	Tailwind CSS, CSS moderno e projetos grandes.
Benefício	Evita conflitos e torna o CSS mais previsível e modular.