A pergunta que todo curso até agora evitou

Uma promessa de dois cursos atrás

O curso anterior fez uma afirmação de passagem: uma regra de media query precisa vir depois da regra base que sobrescreve, porque as duas têm a mesma especificidade, e este curso explicaria. Aqui está a explicação. Ela responde a pergunta que todo curso de CSS até aqui contornou: quando duas regras casam com o mesmo elemento e discordam sobre uma propriedade, qual vence?

Ordem de origem sozinha nunca foi a história completa

Os cursos anteriores se apoiaram numa regra simplificada: "o que vem depois no arquivo vence." Isso só vale quando as duas regras são igualmente específicas. Quando não são, a ordem do código não importa, e uma regra escrita antes pode vencer uma escrita depois. Isso surpreende quem pensa "escrevi por último, então deveria vencer".

#hero-button {
  background: blue;
}

.button {
  background: red;   /* escrito por segundo, mas NÃO vence */
}

<button id="hero-button" class="button">Clique aqui</button>

O botão fica azul, não vermelho, embora .button venha depois. #hero-button vence porque um seletor de ID vale mais que um seletor de classe, onde quer que cada um esteja na folha de estilo. Esse "vale mais" é a especificidade. Ela é o critério que vem primeiro, e a ordem do código só entra quando a especificidade empata.

A ordem real de operações

O CSS resolve um conflito entre duas regras que casam numa sequência fixa, e este curso dá uma aula a cada passo:

1. Importância       → alguma declaração está marcada !important? (aula 6)
2. Especificidade     → qual seletor é estruturalmente "valorizado mais"? (aulas 2-4)
3. Ordem de origem     → se a especificidade empatar exatamente, quem foi escrito por último vence (aula 5)

!important fica acima da especificidade. Uma declaração normal perde para uma !important, por mais específico que seja o seletor dela. Por isso a aula 6 trata o !important como uma saída de emergência rara, não um jeito de ganhar disputas comuns.

Por que isso importa mais conforme um projeto cresce

Um exemplo pequeno raramente esbarra nisso. Folhas de estilo reais, com dezenas de arquivos e meses de acréscimos, esbarram em conflitos de especificidade o tempo todo. Sem um modelo claro, "adicione mais uma classe" ou "use !important" vira hábito e torna cada conflito seguinte mais difícil. Entender especificidade transforma "não faço ideia de por que essa cor não muda" em "vejo o motivo e como corrigir".

O que este curso cobre

• Aula 1, A pergunta que todo curso até agora evitou: ordem de cascata nunca foi a história completa (você está aqui)
• Aula 2, O cálculo de especificidade: IDs, classes e elementos, e como os pesos deles se comparam
• Aula 3, Calculando seletores reais: percorrendo seletores reais desta série passo a passo
• Aula 4, Combinadores e o seletor universal não contam nada: o que não conta para especificidade
• Aula 5, Ordem de origem como desempate: quando "quem vem por último vence" se aplica
• Aula 6, !important e estilos inline: as duas saídas de emergência, e por que evitar recorrer a elas
• Aula 7, Juntando tudo: depurando conflitos reais de especificidade, e escrevendo CSS que os evita

No final, você vai conseguir olhar quaisquer duas regras em disputa e dizer qual vence e por quê.