# O que é a Especificidade CSS?
A especificidade CSS é o algoritmo pelo qual os browsers decidem que valores de propriedades aplicar a um determinado elemento. É essencialmente uma pontuação matemática que diz ao browser "quão específica" é uma regra.Se duas regras têm níveis de especificidade diferentes, vence a que tiver maior peso, independentemente da ordem em que foram escritas. Se tiverem o mesmo peso, vence a última declarada no código fonte.# Como calcular a especificidade CSS
A especificidade calcula-se com base em três categorias que formam um peso de três colunas, normalmente expresso como (A, B, C):- Coluna A (IDs): Conta o número de identificadores únicos. Exemplo:
#headerconta como 1 na coluna A. - Coluna B (Classes, Atributos e Pseudo-classes): Conta todas as classes (
.button), atributos ([type="text"]) e pseudo-classes (:hover). - Coluna C (Elementos e Pseudo-elementos): Conta todos os elementos HTML (
div,h1) e pseudo-elementos (::before).
# A regra de ouro: sem transporte numérico
Uma regra com especificidade (0,50,0) nunca será mais específica do que uma regra (1,0,0). Um único ID bate infinitas classes. As colunas nunca transbordam umas para as outras.
# O problema do !important e a arquitetura BEM
A diretiva!important é uma exceção às regras de especificidade. Quando usada, essa declaração sobrescreve automaticamente qualquer outra. Considera-se má prática porque destrói a cascata natural.Para evitar guerras de especificidade em projetos grandes, metodologias como o BEM defendem o uso exclusivo de seletores de classe com um único nível de profundidade, mantendo artificialmente a especificidade plana em (0,1,0).