Quando duas regras CSS tentam alterar a mesma propriedade, o navegador precisa decidir qual delas vence. O modelo de cascata CSS é o conjunto de regras que resolve esse conflito. Ele considera a origem da regra, a importância, a especificidade e, por fim, a ordem em que o código aparece.

Entender essa sequência evita soluções frágeis, como adicionar !important sem necessidade. Além disso, torna mais simples depurar estilos e manter um projeto que cresce com o tempo.

Um exemplo simples da cascata CSS

Considere duas regras para o mesmo seletor e a mesma propriedade:

p {
  color: green;
}

p {
  color: yellow;
}Code language: CSS (css)

Nesse caso, os parágrafos ficam amarelos. As regras têm a mesma origem, importância e especificidade. Portanto, a regra que aparece por último vence.

Como o modelo de cascata CSS resolve conflitos

O navegador avalia as declarações em uma ordem definida. Na prática, use esta sequência mental para investigar um conflito:

1. Relevância: a regra só participa se o seletor corresponder ao elemento e a media query, o container query ou a feature query forem verdadeiros.
2. Origem e importância: regras do autor, do usuário e do navegador têm prioridades diferentes. Declarações !important mudam essa ordem e exigem cuidado.
3. Especificidade: quando origem e importância empatam, o seletor mais específico vence.
4. Proximidade de escopo: dentro de @scope, a regra cujo escopo está mais próximo pode vencer.
5. Ordem de aparência: se todo o resto empatar, a última declaração vence.

As @layer também fazem parte da etapa de origem e importância. Elas ajudam a organizar estilos de reset, bibliotecas e componentes sem recorrer a seletores cada vez mais específicos.

Origem, importância e camadas

Nem todo CSS vem do seu arquivo principal. O navegador aplica estilos padrão, extensões podem adicionar regras e a aplicação inclui o CSS de autoria. Por isso, duas declarações idênticas podem ter resultados diferentes conforme sua origem.

Evite tratar !important como uma solução automática. Ele altera a prioridade da cascata e pode dificultar futuras substituições. Antes de usá-lo, verifique se uma camada, um seletor menor ou uma ordem de importação mais clara resolve o problema.

@layer reset, components, utilities;

@layer components {
  .button { color: white; }
}

@layer utilities {
  .text-brand { color: rebeccapurple; }
}Code language: CSS (css)

Nesse exemplo, as camadas deixam explícita a intenção arquitetural do CSS. Assim, você controla prioridades no nível do projeto, não apenas no nível de cada seletor.

Especificidade: o critério que vem depois

A especificidade só entra em cena quando as regras empataram nas etapas anteriores. Em termos simples, IDs pesam mais que classes, atributos e pseudo-classes, que por sua vez pesam mais que elementos e pseudo-elementos.

button { color: green; }
.button { color: blue; }
#save-button { color: red; }Code language: CSS (css)

Para um botão com id="save-button" e class="button", a cor será vermelha. No entanto, isso não significa que IDs sejam a melhor escolha para estilização. Se você precisa vencer o próprio CSS com frequência, vale revisar a estrutura das camadas e dos componentes.

Boas práticas para trabalhar com a cascata CSS

• Prefira classes para estilos reutilizáveis e evite IDs como gancho visual.
• Defina uma ordem previsível para imports e @layer.
• Use seletores curtos e legíveis, em vez de aumentar a especificidade para resolver conflitos.
• Reserve !important para casos realmente excepcionais e documente o motivo.
• Ao depurar, confira no DevTools qual regra venceu e em qual etapa da cascata ocorreu o desempate.

Conclusão

O modelo de cascata CSS não é apenas uma regra de “o último estilo vence”. Ele organiza como o navegador compara declarações antes de desenhar a interface. Ao dominar origem, importância, especificidade e ordem, você escreve CSS mais previsível e fácil de evoluir.

Para aprofundar, consulte a documentação da MDN sobre a cascata CSS. Em seguida, veja também como funciona a herança em CSS e use o DevTools para acompanhar a regra vencedora em um caso real.