Quando dois estilos brigam, quem ganha?
Você cria uma página, aplica uma classe, depois um id, e o navegador simplesmente ignora um deles. Isso acontece todos os dias no dia a dia de desenvolvimento front-end, e a regra que decide isso se chama especificidade CSS. Ninguém gosta de depender dela, mas quando o estilo não aplica como esperado, é sempre lá que a gente vai olhar primeiro.
qual sinalização prevalece sobre as demais
O CSS usa um sistema de pesos para decidir qual regra vence quando há conflito entre seletores que apontam para o mesmo elemento. A hierarquia funciona assim, do mais fraco para o mais forte: Elementos e pseudo-elementos valem 1 ponto cada. p, div, ::before, ::after — tudo isso conta como um na ponta baixa da escala.
Classes, atributos e pseudo-classes valem 10 pontos cada. .botao, [disabled], :hover entram nessa camada. O problema é que muita gente trata classes como se fossem invisíveis ou equivalentes a IDs, o que gera confusão na hora de resolver heranças de estilo. IDs valem 100 pontos. #cabecalho, #formulario-login — peso significativo, mas ainda não é absoluto.
Atributo style inline vale 1000 pontos. style="color: red;" no HTML puro vence qualquer seletor CSS, sem discussão. Esse é o motivo pelo qual corrigir inline styles manualmente é sempre mais trabalhoso do que deveria ser. !important não tem pontuação fixa, mas sobrepõe quase tudo, exceto quando outro !important com maior especificidade o confronta. Esse é o recurso mais abusado da linguagem e, honestamente, o que mais causa dor de cabeça em manutenção.
No cenário real, a maioria dos conflitos que eu resolvo segue um padrão previsível. Um componente de formulário herda estilos de um reset global, uma classe de utility substitui um seletor de layout, e então o desenvolvedor aplica !important em três lugares diferentes achando que está resolvendo. Na prática, o problema era uma regra de id com 100 pontos contra uma combinação de classe mais elemento com 11 pontos. Nada de !important seria necessário. Uma coisa que poucos começam entendendo de verdade é que especificidade se compara por posição, não por soma total. Um seletor com 100 pontos de id vence qualquer combinação de classes e elementos, mesmo que essa combinação somada ultrapasse 100 em números brutos. Isso quebra bastante gente que pensa em CSS como uma conta aritmética simples.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Outro detalhe que causa confusão constante: seletores compostos como div.container.active têm especificidade de 20 pontos (dois classes), não 3. Cada parte do seletor conta separadamente, mas a hierarquia de camadas permanece a mesma. Eu me deparei com um caso recentemente em que um framework de terceiros injetava estilos via JavaScript com IDs gerados dinamicamente. O CSS do projeto usava classes com especificidade alta, mas sempre perdia porque o framework gerava seletores do tipo #app-main .botao-primario, que somavam 110 pontos contra os 20 pontos das minhas classes. A solução foi simplesmente reescrever o seletor com um id correspondente em vez de lutar com !important, o que só pioraria a situação a longo prazo.
O modo mais limpo de lidar com precedência é usar o stylelint com a regra no-descending-specificity. Ele marca no código quando um seletor de menor peso vem depois de um de maior peso no mesmo arquivo, o que evita que conflitos silenciosos se acumulem. Recomendo rodar isso antes de qualquer commit. Consome cerca de 200ms num projeto médio de 400 arquivos CSS, então não justifica pular essa etapa. Há situações em que a especificidade tradicional simplesmente não resolve. O caso clássico são componentes isolados que precisam sobrescrever estilos de bibliotecas externas sem acesso ao código-fonte. Nesses cenários, o uso de !important pode ser aceitável como última alternativa, mas o custo é que qualquer próxima pessoa que maintenance esse arquivo vai levar no mínimo 15 minutos a mais para entender por quê aquele valor está travado assim.
Quando o conflito envolve variáveis CSS customizadas, a história muda um pouco. Variáveis resolvem pela cascade normal, o que significa que uma variável declarada dentro de um id sobrepõe uma declarada em uma classe, independentemente do peso do seletor onde foi definida originalmente. Isso é útil, mas também é armadilha fácil: muita gente acha que redeclarar uma variável em qualquer lugar vai funcionar, e não funciona se o escopo do seletor original tiver maior especificidade. A recomendação prática que eu sigo há anos é simples e sem glamour: manter a especificidade tão baixa quanto possível, usar BEM ou uma metodologia similar para nomear classes, e evitar ids para estilização completamente. Quando um id aparece no código CSS, ele quase sempre indica que alguém já perdeu a batalha contra a especificidade e precisou subir o nível para ganhar.
Se você precisa consultar a precedência rapidamente enquanto desenvolve, a extension Specificity Graph para VS Code mostra visualmente o peso de cada seletor no arquivo aberto. Leva cerca de três segundos para carregar e evita que você gaste dez minutos caçando qual regra está vencendo. O problema é que nem todo conflito é de especificidade. Às vezes o que parece um erro de precedência é apenas uma propriedade que não herda, como display ou margin, aplicada em um contexto onde o fluxo normal do documento faz com que o valor nunca apareça como esperado. A primeira coisa que eu verifico antes de tocar em especificidade é se o elemento realmente está no fluxo correto e se a propriedade em questão é herdável.
A hierarquia de precedência no CSS é previsível o suficiente para não precisar de consulta constante, mas imprevisível o bastante para causar frustração constante. O que separa um desenvolvedor que perde tempo nisso de um que não perde é a disciplina de escrever seletores com peso baixo e documentar quando precisa subverter a regra. Documentar custa nada e economiza horas de investigação. Se o seu projeto já tem milhares de linhas CSS espalhadas por décadas de manutenção, revisar a especificidade inteira de uma vez raramente vale o esforço. Eu costumo fazer revisão por camada: primeiro os arquivos do layout principal, depois os de componentes, e só então utilitários. Esse ordineamento reduz o escopo e evita que correções em um arquivo quebrem dependências invisíveis em outro.
