Especificidade

A regra de desempate do CSS quando duas regras querem estilizar o mesmo elemento.

Também aparece como "cascata", "cascade", "!important", "seletor".

No mundo do Design

O Figma chama isso de Ordem das camadas

Quando duas regras de CSS brigam pelo mesmo elemento, o navegador não escolhe a última nem a primeira. Ele conta quão específico é cada seletor e o mais específico ganha.

A hierarquia, do mais fraco pro mais forte:

seletor de tag: p
seletor de classe: .cartao
seletor de id: #topo
estilo escrito direto no elemento: style="..."
!important, que ignora tudo acima

Empate na especificidade? Aí sim vale a última regra escrita.

Por que você vai ouvir falar disso

Quase todo bug de "mudei a cor e não mudou nada" é especificidade. Alguém escreveu uma regra mais forte em outro arquivo e ela continua vencendo.

O !important resolve na hora e cria o problema seguinte, porque a próxima pessoa vai precisar de outro !important pra vencer o seu. Vira leilão.

O que isso tem a ver com design

É o mesmo raciocínio de sobrescrita de componente no Figma: a instância pode sobrescrever o master, e quanto mais sobrescrita você acumula, menos previsível fica o resultado. Design system saudável no Figma e CSS saudável seguem a mesma disciplina, que é evitar exceção em cima de exceção.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.