A cascata

Várias regras podem apontar para o mesmo título do Belavista. A cascata decide qual declaração vence: origem, importância, especificidade e ordem no arquivo.

O exemplo deste capítulo é 24-cascata, no pacote que acompanha o volume. Comente uma regra, preveja a cor final do h1, recarregue e confira.

O que você vai aprender

• Ordenar os critérios da cascata.
• Ver o efeito da ordem de aparição.
• Distinguir folhas do autor, do usuário e do navegador.
• Usar DevTools para achar “por que não aplicou”.
• Evitar !important como atalho rotineiro.

Ordem de aparição

Se duas declarações empatam em origem, importância e especificidade, vence a que aparece por último.

h1 {
  color: #1a1a1a;
}

h1 {
  color: #8b1e1e;
}

O título fica vermelho do ateliê. A primeira regra não “sumiu”; perdeu o empate.

Origem e importância

Origens típicas: folha do user agent (defaults do navegador), preferências do usuário, e a sua folha de autor (styles.css). Declarações !important sobem a prioridade — e complicam a manutenção. No Belavista, reserve !important para correção pontual extrema, não para ganhar de si mesmo.

Especificidade (prévia)

Um seletor mais específico vence um mais genérico, mesmo que venha antes:

p {
  color: #333;
}

.manifesto p {
  color: #8b1e1e;
}

.manifesto p ganha. O capítulo 25 aprofunda a pontuação.

DevTools

Nas Styles, regras riscadas perderam a cascata. Passe o mouse e leia a origem. Se a sua regra não aparece, o seletor não encontrou o elemento — problema de HTML, não de cascata.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cascata — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main class="manifesto">
      <h1>Oficina de cartaz</h1>
      <p>Duas regras, uma cor final.</p>
    </main>
  </body>
</html>

Ordem prática no Belavista: uma folha styles.css; regras gerais no topo (body, tipografia); componentes depois (.cartaz, .toolbar); ajustes pontuais no fim. Assim o empate por ordem fica previsível.

Erro comum: culpar a cascata quando o seletor está errado (#main no CSS e id="conteudo" no HTML). Confirme o match antes de subir especificidade.

Critério para avançar

Você avança se: explica empate resolvido pela ordem; identifica regra riscada nas DevTools; resolve um conflito sem !important.

Atividades

1. Duas regras idênticas em seletor: qual cor fica se a segunda declara color: navy?
2. Por que !important atrapalha o dia a dia?
3. A cascata considera só o CSS do autor?

Respostas comentadas

1. navy, porque empatam e a última no arquivo vence.
2. Ele fura o fluxo normal; depois você precisa de outro !important para corrigir. Prefira seletor claro e ordem.
3. Não. Navegador e usuário também entram; a cascata compara origem e importância entre eles.