A Cascata é como o CSS foi projetado desde o início, e há um motivo pelo qual é chamado de CSS — Folhas de Estilo em Cascata (Cascading Style Sheets).
Infelizmente, CSS tem uma má reputação pelo mesmo conceito fundamental sobre o qual foi construído.
Mas o que exatamente é a Cascata, e é algo tão ruim quanto a maioria das pessoas faz parecer?
Introdução
Digamos que um dev escreva um monte de CSS e depois acesse o navegador para testá-lo. Para sua surpresa, os estilos que ele escreveu não são aplicados ao elemento que ele acabou de estilizar; em vez disso, alguns outros estilos são!
Com CSS, vários estilos podem afetar um único elemento. Então, por exemplo, você tem um parágrafo em uma página, mas este parágrafo pode ser estilizado por qualquer bloco CSS. Literalmente.
Fazendo um paralelo com programação, é como ter uma variável JavaScript global que pode ser manipulada por qualquer função dentro do código. Uma receita para o desastre, ao que parece.
Mas, novamente, a Cascata constitui o raciocínio fundamental por trás de como o CSS foi criado. Você não pode mudar isso; só pode aceitar.
O que é a Cascata?
Em termos simples, a Cascata é como o navegador determina quais estilos aplicar a um elemento específico. Simples assim.
Felizmente, os pesadelos associados à Cascata podem ser entendidos, já que ela é governada por apenas 2 fatores:
- A especificidade dos seletores de elemento
- A ordem dos estilos sendo escritos
Vamos dar uma olhada rápida nisso.
Cascata CSS: especificidade do seletor
Você pode comparar a especificidade do seletor a como a mente humana interpreta instruções.
Por exemplo, veja essas 2 caixas:
Se eu lhe dissesse “Por favor, pegue a caixa vermelha para mim”, qual delas você me entregaria?
Você poderia perguntar: “Qual das caixas, a ou b?” ou até mesmo pegar as 2 caixas — afinal, ambas são vermelhas, certo?
Este é um paralelo que ilustra muito bem a situação em que os navegadores se encontram ao lidar com a especificidade CSS.
Quando você passa a instrução “estilize o parágrafo com uma cor de fundo vermelha”:
|
1 2 3 |
p { background-color: red; } |
Como pode haver muitos elementos de parágrafo na página, o browser tem que “adivinhar” a qual parágrafo se refere sua instrução.
O navegador não pode fazer perguntas complementares aos desenvolvedores para renderizar, então, ele segue em frente e tenta estilizar cada parágrafo da página com fundo vermelho.
Entretanto, se, ao invés, você tivesse instruído “estilize o parágrafo com um nome de classe de ‘reddy’ com um fundo vermelho”:
|
1 2 3 |
p.reddy { background-color: red; } |
Esse é um pedido mais… Específico!
Agora, o navegador estilizará o(s) elemento(s) parágrafo específico(s) que você solicitou. Simples assim.
Tecnicamente, o navegador dá uma olhada em cada seletor que tem como alvo um elemento específico e atribui “pontuações” a cada um deles, e aquele com uma pontuação de especificidade mais alta “vence”.
Cada tipo de seletor recebe pontos diferentes, por exemplo, IDs recebem uma pontuação, classes e atributos outra, e assim por diante. Em uma “briga” de seletores, ganha quem tiver o maior valor.
Cascata CSS: ordem dos estilos
O segundo fator que influencia a cascata é a ordem dos estilos. Um exemplo pode ser visto com a estilização do mesmo elemento em 2 regras CSS diferentes.
|
1 2 3 4 5 6 7 |
p.reddy { background: red; } p.reddy { background: blue; } |
Mesmo que ambos os seletores tenham a mesma especificidade, a ordem do conjunto de regras entra em jogo: a segunda declaração prevalecerá sobre a anterior, e o parágrafo será azul.
Pegadinha: adivinha essa…
Considerando o código abaixo, qual seria a cor do texto do link?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <style> #nav-force > ul > li > a.nav-link { color: blue; } </style> </head> <body> <nav id="nav-force"> <ul> <li> <a href="/" class="nav-link" style="color: red">Link</a> </li> </ul> </nav> </body> </html> |
E aí, azul ou vermelho?
Dica: perceba que o estilo do link está incorporado e dentro do bloco <style></style>.
E aí, e aí, e aí? Azul ou vermelho?!
A resposta é: o estilo inline sempre vence! A cor do link será vermelho.
Lembra-se dos 3 tipos de declaração possíveis de regras CSS?
- Inline
- Incorporado
- Externo
Essa ordem também influi na pontuação da especificidade. Estilos inline “pesam” mais; seguidos por incorporados e, depois, externos.
Claro que, como muitos de nós sabemos — às vezes, aprendendo da pior maneira possível — uma declaração !important sempre pode desequilibrar esse jogo. Mas isso já é assunto para outra ocasião. ;)