A Cascata: Origem e Ordem

A cascata é o algoritmo que o CSS usa para determinar qual declaração de estilo vence quando várias regras têm como alvo a mesma propriedade no mesmo elemento. Ela considera a origem, a importância, a especificidade e a ordem de origem.

As declarações CSS vêm de três origens, em ordem de prioridade:

1. Folha de estilos do agente do usuário — padrões do navegador
2. Folha de estilos do usuário — estilos personalizados definidos pelos usuários (acessibilidade)
3. Folha de estilos do autor — seus arquivos CSS

Com declarações normais (sem importância), os estilos do autor substituem os estilos do usuário, que substituem os estilos do agente do usuário. É por isso que seu CSS vence os padrões do navegador.

Adicionar !important inverte a ordem das origens para essa declaração:

1. !important do agente do usuário
2. !important do usuário — maior prioridade (acessibilidade)
3. !important do autor

É por isso que as substituições de acessibilidade do usuário (por exemplo, cores forçadas) não podem ser anuladas pelo CSS do autor.

Quando duas declarações da mesma origem entram em conflito, a especificidade determina a vencedora. A maior especificidade vence — é nisso que os desenvolvedores pensam primeiro ao depurar CSS.

Quando duas regras têm especificidade idêntica, vence aquela que aparece mais tarde na folha de estilos. Essa é a regra da "ordem de origem". É por isso que a ordem das suas declarações @import e @keyframe é importante.

As camadas da cascata do CSS (@layer) introduzem uma nova etapa da cascata entre a origem e a especificidade. A ordem das camadas determina a prioridade, e uma declaração em uma camada posterior vence uma em uma camada anterior, independentemente da especificidade.

Ordem completa de prioridade (da maior para a menor):

1. Origem + importância (!important do usuário, !important do autor)
2. Valores de animação
3. Camadas de CSS (as camadas posteriores vencem)
4. Especificidade
5. Ordem de origem
6. Valores de transição

A herança é diferente da cascata. Os valores herdados vêm do estilo calculado do elemento pai. Eles perdem para qualquer valor aplicado diretamente, mesmo quando vêm de uma regra de baixa especificidade.

Coloque os estilos mais específicos (variantes) depois dos estilos base na sua folha de estilos. É por isso que os arquivos de componentes devem ser importados depois dos arquivos de redefinição e base.

No painel de estilos do DevTools, as regras são listadas da maior para a menor prioridade. As regras riscadas perderam na cascata. Passe o cursor sobre uma regra para ver seu arquivo de origem e número da linha durante a depuração.

Duas regras têm como alvo a mesma propriedade e possuem especificidade idêntica. Qual delas vence?

A cascata resolve conflitos de estilo usando a origem (autor > usuário > navegador), depois a importância (!important inverte a ordem), depois a ordem de @layer, a especificidade e, por fim, a ordem de origem. Entender a cascata significa que você pode prever exatamente qual regra vencerá em qualquer conflito — sem mais suposições.