A cascata

Podcast do CSS - 004: A Cascade

CSS significa folhas de estilo em cascata. A cascata é o algoritmo para resolver conflitos em que várias regras CSS se aplicam a um elemento HTML. É por isso que o texto do botão estilizado com o CSS a seguir será azul.

button {
  color: red;
}

button {
  color: blue;
}

Entender o algoritmo em cascata ajuda a entender como o navegador resolve conflitos como esse. Ele é dividido em quatro estágios distintos.

  1. Posição e ordem de exibição: a ordem em que suas regras de CSS aparecem.
  2. Especificidade: um algoritmo que determina qual seletor de CSS tem a correspondência mais forte.
  3. Origem: a ordem de exibição do CSS e de onde ele vem, seja em um estilo de navegador, CSS de uma extensão do navegador ou seu CSS criado
  4. Importância: algumas regras de CSS têm um peso maior que outras. especialmente com o tipo de regra !important

Posição e ordem de aparência

A ordem em que as regras CSS aparecem e como elas aparecem é levada em consideração pela cascata enquanto calcula a resolução de conflitos.

A demonstração no início desta lição é o exemplo mais simples de posição. Existem duas regras com seletores de especificidade idêntica, então o último a ser declarado venceu.

Os estilos podem vir de várias fontes em uma página HTML, como uma tag <link>, uma tag <style> incorporada, e CSS inline, conforme definido no atributo style de um elemento.

Caso você tenha um <link> que inclua CSS na parte superior da página HTML, depois outra <link> que inclui CSS na parte inferior da página: a <link> inferior terá a maior especificidade. O mesmo acontece com elementos <style> incorporados. Quanto mais detalhadas estiverem na página, mais específicas elas vão ficar.

O botão tem um fundo azul, conforme definido pelo CSS, que é incluído por um elemento <link />. Uma regra CSS que a define como escura está em uma segunda folha de estilo vinculada e é aplicada devido à posição mais recente.

Essa ordem também se aplica a elementos <style> incorporados. Se elas forem declaradas antes de um <link>, o CSS da folha de estilo vinculada terá mais detalhes.

O elemento <style> é declarado no <head>, enquanto o elemento <link /> é declarado no <body>. Isso significa que ele é mais específico do que o elemento <style>.

Um atributo style in-line com CSS declarado nele substituirá todos os outros CSS. independentemente da posição, a menos que uma declaração tenha !important definido.

A posição também se aplica na ordem da regra de CSS. Neste exemplo, o elemento terá um plano de fundo roxo porque a background: purple foi declarada por último. Como o plano de fundo verde foi declarado antes do roxo, ele agora é ignorado pelo navegador.

.my-element {
  background: green;
  background: purple;
}

Ser capaz de especificar dois valores para a mesma propriedade pode ser uma maneira simples de criar substitutos para navegadores que não aceitam determinado valor. No próximo exemplo, font-size é declarado duas vezes. Se clamp() for compatível com o navegador, a declaração font-size anterior será descartada. Se clamp() não for compatível com o navegador, a declaração inicial será honrada, e o tamanho da fonte será 1,5rem

.my-element {
  font-size: 1.5rem;
  font-size: clamp(1.5rem, 1rem + 3vw, 2rem);
}
.

Teste seu conhecimento

Teste seu conhecimento sobre a cascata

Se você tiver o seguinte HTML na sua página:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <button>I am a button</button>
    <style>
      button {
        background: pink;
      }
    </style>
  </body>
</html>

Dentro de styles.css, está a seguinte regra CSS:

button {
  background: yellow;
}

Qual é a cor do plano de fundo do botão?

rosa
A origem da <style> incorporada está mais abaixo na página do que a tag <link>, portanto, embora a especificidade de button seja a mesma, a position da regra de estilo faz com que ela ganhe.
yellow
No documento HTML, o plano de fundo do botão amarelo pode ter sido lido primeiro, mas uma regra mais nova da mesma especificidade foi descoberta mais tarde, fazendo com que a regra não se aplique ao botão.

Especificidade

A especificidade é um algoritmo que determina qual seletor de CSS é o mais específico, usando um sistema de ponderação ou pontuação para fazer esses cálculos. Ao tornar uma regra mais específica, você poderá fazer com que ele seja aplicado mesmo que outro CSS correspondente ao seletor apareça mais tarde no CSS.

Na próxima aula, você vai conhecer os detalhes de como a especificidade é calculada, No entanto, ter algumas coisas em mente o ajudará a evitar muitos problemas de especificidade.

O CSS que segmenta uma classe em um elemento tornará essa regra mais específica, e, portanto, considerada mais importante de ser aplicada, do que um CSS segmentando apenas o elemento. Isso significa que, com o CSS a seguir, a h1 será colorida em vermelho, mesmo que ambas as regras sejam correspondentes e a regra do seletor h1 venha mais tarde na folha de estilo.

<h1 class="my-element">Heading</h1>

.my-element {
  color: red;
}

h1 {
  color: blue;
}

Um id torna o CSS ainda mais específico, assim, os estilos aplicados a um ID substituirão aqueles aplicados de muitas outras maneiras. Esse é um motivo pelo qual geralmente não é uma boa ideia anexar estilos a uma id. Isso pode dificultar a substituição desse estilo por outro elemento.

A especificidade é cumulativa

Como você descobrirá na próxima aula, cada tipo de seletor recebe pontos que indicam quão específico ele é, os pontos de todos os seletores que você usou para segmentar um elemento são somados. Isso significa que, se você segmentar um elemento com uma lista de seletores como a.my-class.another-class[href]:hover, você recebe algo muito difícil de substituir por outro CSS. Por esse motivo, e para ajudar a tornar seu CSS mais reutilizável, é uma boa ideia manter seus seletores o mais simples possível. Use a especificidade como uma ferramenta para chegar aos elementos quando precisar mas sempre considere refatorar listas de seletores longas e específicas, se possível.

Origem

O CSS que você cria não é o único aplicado a uma página. A cascata considera a origem do CSS. Essa origem inclui a folha de estilo interna do navegador, estilos adicionados por extensões do navegador ou pelo sistema operacional, e seu CSS criado. Veja a ordem de especificidade dessas origens, da menos específica para a mais específica:

  1. Estilos base do user agent. Esses são os estilos que seu navegador aplica aos elementos HTML por padrão.
  2. Estilos de usuário locais. Eles podem ser provenientes do nível do sistema operacional, como o tamanho de fonte básico, ou uma preferência de movimento reduzido. Eles também podem vir de extensões do navegador, como uma extensão de navegador que permite ao usuário criar o próprio CSS personalizado para uma página da Web.
  3. CSS criado. O CSS que você cria.
  4. Criado !important. Qualquer !important que você adicionar às declarações criadas por você.
  5. Estilos de usuários locais !important: Qualquer !important do nível do sistema operacional, ou no nível da extensão do navegador.
  6. User agent !important. Qualquer !important definido no CSS padrão, fornecidos pelo navegador.
Uma demonstração visual da ordem das origens, conforme também explicado na lista.

Se você tiver um tipo de regra !important no CSS de sua autoria e o usuário tiver um tipo de regra !important no CSS personalizado, qual CSS vence?

Teste seu conhecimento

Teste seu conhecimento sobre origens em cascata

Teste seus conhecimentos sobre as origens em cascata, considere o estilo a seguir regras de várias origens:

Estilo do user agent

h1 { margin-block-start: 0.83em; }

Inicializar

h1 { margin-block-start: 20px; }

Estilos do autor da página

h1 { margin-block-start: 2ch; }

@media (max-width: 480px) {
  h1 { margin-block-start: 1ch; }
}

Estilo personalizado do usuário

h1 { margin-block-start: 2rem !important; }

Em seguida, considerando o seguinte HTML:

<h1>Lorem ipsum</h1>

Qual é o margin-block-start final do h1?

20px
O bootstrap faz parte da origem de criação, que perde para o estilo do usuário local importante.
0,83 em
A origem do estilo do user agent perde o estilo de usuário local importante.
2rem
Este estilo personalizado do usuário !important tem a origem mais específica.
2 canais
Este estilo de autor faz parte da origem de criação, que perde para o estilo de usuário local importante.
1 canal
Este estilo de autor faz parte da origem de criação, que perde para o estilo de usuário local importante.

Importância

Nem todas as regras de CSS são calculadas da mesma forma, ou que têm a mesma especificidade.

A ordem de importância, da menos importante, mais importante é o seguinte:

  1. tipo de regra normal, como font-size, background ou color
  2. animation tipo de regra
  3. Tipo de regra !important (seguindo a mesma ordem da origem)
  4. transition tipo de regra

Os tipos de animação ativa e de regra de transição têm maior importância do que as regras normais. Caso de transições tenham maior importância do que os tipos de regra !important. Isso ocorre porque, quando uma animação ou transição fica ativa, seu comportamento esperado é mudar o estado visual.

Como usar o DevTools para descobrir por que alguns CSS não estão sendo aplicados

O DevTools do navegador normalmente mostra todo o CSS que pode corresponder a um elemento, e aqueles que não estão sendo usados riscados.

Uma imagem do DevTools do navegador com o CSS substituído riscado

Se o CSS que você esperava não aparecer, então ele não corresponderia ao elemento. Nesse caso, você precisa procurar em outro lugar, talvez por um erro de digitação no nome de uma classe ou de um elemento ou algum CSS inválido.

Teste seu conhecimento

Teste seu conhecimento sobre a cascata

A Cascade pode ser usada para...

Resolver conflitos quando vários estilos se aplicam a um elemento.
Essa é uma das principais metas dela: a resolução de conflitos.
Garantir que haja apenas um valor de estilo para cada propriedade no momento do desenho.
O texto só pode ter uma cor, e a Cascade é uma maneira de determinar qual deve ser.
Regras de estilo de pontuação e ponderação.
Pontuação e ponderação fazem parte da fase de classificação da Cascade.
Classificar e filtrar atributos de estilo.
A classificação e a filtragem são fases da Cascade que ajudam a entender os aspectos da resolução de conflitos.

Recursos