Specificity CSS: Na hierarquia do CSS, a Cascata (abordada no artigo anterior) é o conjunto de regras mestras. Dentro dessa cascata, o fator mais crucial para resolver conflitos é a Especificidade.
A Especificidade é um mecanismo de pontuação usado pelo navegador para determinar qual regra CSS “vence” quando duas ou mais regras aplicáveis competem para estilizar o mesmo elemento. A regra com a maior pontuação de especificidade tem seu estilo aplicado.
Neste artigo, Specificity CSS, vamos detalhar o sistema de pontuação da Especificidade e fornecer dicas práticas para gerenciá-la em seus projetos.
1. O Mecanismo de Pontuação: Como Contar a Especificidade
A Especificidade é calculada como um conjunto de quatro números que formam uma pontuação não-decimal. O navegador compara esses números em ordem (da esquerda para a direita) para encontrar o vencedor.
| Posição (Hierarquia) | Fator de Contagem | O que Conta | Pontuação Adicionada |
| A (Mais forte) | Estilos Inline | Número de estilos definidos no atributo style="" | 1, 0, 0, 0 |
| B | IDs | Número de seletores de ID (#) | 0, 1, 0, 0 |
| C | Classes, Atributos, Pseudo-Classes | Número de seletores de Classe (.), Atributos ([type="text"]), e Pseudo-Classes (:hover, :nth-child) | 0, 0, 1, 0 |
| D (Mais fraco) | Elementos e Pseudo-Elementos | Número de seletores de Elemento (p, h1) e Pseudo-Elementos (::before, ::after) | 0, 0, 0, 1 |
Exemplo de Cálculo de Especificidade
| Seletor | Cálculo (A, B, C, D) | Especificidade | Vencedor |
p#titulo | (0, 1 ID, 0 C, 1 E) | 0, 1, 0, 1 | Alto |
.destaque | (0, 0 ID, 1 C, 0 E) | 0, 0, 1, 0 | Médio |
h1 | (0, 0 ID, 0 C, 1 E) | 0, 0, 0, 1 | Baixo |
No exemplo acima, p#titulo venceria em qualquer conflito, pois seu dígito B (1) é maior que o dígito B dos outros seletores (0).
2. Exemplos de Conflitos (Regras de Ouro)
A. Classes Superam Elementos
| Regra CSS | Pontuação | Estilo Aplicado |
p { color: blue; } | 0, 0, 0, 1 | Perde |
.destaque { color: red; } | 0, 0, 1, 0 | Vence. O dígito C (1) supera o dígito D (1). |
B. IDs Superam Tudo (Exceto Inline e !important)
| Regra CSS | Pontuação | Estilo Aplicado |
.card .titulo | 0, 0, 2, 0 | Perde |
#id-principal | 0, 1, 0, 0 | Vence. O dígito B (1) supera o dígito C (2). |
Lembre-se: Não há “carregamento” ou “transporte” de pontuação entre os dígitos. Um ID (0,1,0,0) é infinitamente mais específico do que 1000 classes (0,0,1000,0).
3. Dicas de Gerenciamento: Mantenha a Especificidade Baixa
Apesar de ser tentador usar IDs e aninhamento profundo para garantir que seus estilos sejam aplicados, o desenvolvimento moderno prega o oposto: Mantenha a Especificidade o mais baixa possível.
- Priorize Classes: Use seletores de Classe como regra de ouro. Eles oferecem controle suficiente (0,0,1,0) e são fáceis de sobrescrever quando necessário.
- Evite Seletores Aninhados Longos: Evite regras como
body #main .container div p. Isso cria uma pontuação alta e acoplamento desnecessário ao HTML. Prefira uma única classe:.mensagem-paragrafo. - IDs Apenas para JS/Âncoras: Use o
idcomo um gancho para o JavaScript ou para navegação (âncoras), e não para estilização. Se precisar estilizar, use uma classe. - Use
!importantcomo Bomba Atômica: Use apenas em casos extremos e bem documentados, como para estilos de utility que precisam sobrescrever qualquer coisa (ex:.is-hidden { display: none !important; }).
✅ Conclusão Specificity CSS
A Especificidade é o fator de desempate mais importante da Cascata. Ao dominar o sistema de pontuação (Inline > ID > Classe > Elemento), você ganha o poder de prever o comportamento do seu CSS, resolver conflitos de forma eficiente e, o mais importante, escrever um código que seja fácil de manter e de sobrescrever por outros desenvolvedores.
Toda jornada tem um início, e o início para se tornar um desenvolvedor web é dominar as seguintes tecnologias, que você encontra aqui mesmo:
E se você gosta do nosso conteúdo, não deixe de contribuir adquirindo os serviços e produtos dos nossos apoiadores e empresas que somos associados:
