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 seguinte CSS será azul.

button {
  color: red;
}

button {
  color: blue;
}

Entender o algoritmo em cascata ajuda você a entender como o navegador resolve conflitos como esse. O algoritmo em cascata é 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 quando o CSS aparece e de onde ele vem, seja um estilo de navegador, o CSS de uma extensão de navegador ou seu CSS criado.
  4. Importância: algumas regras CSS têm mais peso do que outras, especialmente com o tipo de regra !important

Posição e ordem de exibição

A ordem em que suas regras de CSS aparecem e como elas aparecem é considerada pela cascata enquanto ela calcula a resolução de conflitos.

A demonstração no início desta aula é o exemplo mais direto de posição. Há duas regras com seletores de especificidade idêntica, de modo que a última a ser declarada venceu.

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

Se você tiver um <link> que inclui CSS na parte de cima da página HTML, outro <link> que inclua CSS na parte de baixo da página: o <link> da parte de baixo terá a maior especificidade. O mesmo acontece com elementos <style> incorporados. Quanto mais específicos estiverem na página, mais específicos eles estarão.

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

Essa ordem também se aplica aos elementos <style> incorporados. Se forem declarados antes de um <link>, o CSS da folha de estilo vinculada será mais específico.

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 inline com CSS declarado substitui todos os outros CSS, independente da posição dele, a menos que uma declaração tenha !important definido.

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

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

A possibilidade de especificar dois valores para a mesma propriedade pode ser uma maneira simples de criar substitutos para navegadores que não oferecem suporte a um valor específico. No exemplo a seguir, font-size é declarado duas vezes. Se clamp() for compatível com o navegador, a declaração font-size anterior será descartada. Se o navegador não oferecer suporte a clamp(), a declaração inicial será respeitada, e o tamanho da fonte será de 1,5 rem.

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

Teste seu conhecimento

Teste seus conhecimentos sobre a cascata

Se a página tiver o seguinte HTML:

<!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, é a seguinte regra CSS:

button {
  background: yellow;
}

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

rosa
A origem <style> incorporada está mais abaixo na página do que a tag <link>. Portanto, embora a especificidade de button seja a mesma, a posição da regra de estilo faz com que ela vença.
yellow
Para o documento HTML, o plano de fundo do botão amarelo pode ter sido lido primeiro, mas uma regra mais recente com a mesma especificidade foi descoberta posteriormente, fazendo com que essa regra não se aplicasse 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ê pode fazer com que ela seja aplicada mesmo que outro CSS correspondente ao seletor apareça mais tarde no CSS.

Na próxima aula, você vai aprender os detalhes de como a especificidade é calculada. No entanto, considerar alguns detalhes vai ajudar a evitar muitos problemas de especificidade.

A segmentação por CSS de uma classe em um elemento torna essa regra mais específica e, portanto, considerada mais importante para ser aplicada do que o CSS segmentando apenas o elemento. Isso significa que, com o CSS a seguir, o h1 ficará vermelho, mesmo que as duas regras correspondam e a regra para o seletor h1 seja exibida posteriormente 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. Portanto, os estilos aplicados a um ID vão substituir os aplicados de várias outras maneiras. Essa é uma razão pela qual geralmente não é uma boa ideia anexar estilos a uma id. Pode ser difícil substituir esse estilo por outro.

A especificidade é cumulativa

Como você verá na próxima lição, cada tipo de seletor recebe pontos que indicam a especificidade dele. Os pontos de todos os seletores usados 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, terá algo bem difícil de substituir por outro CSS. Por esse motivo, e para ajudar a tornar o CSS mais reutilizável, é recomendável manter os seletores o mais simples possível. Use a especificidade como uma ferramenta para chegar aos elementos quando necessário, 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 Estes são os estilos que o seu navegador aplica aos elementos HTML por padrão.
  2. Estilos de usuários locais. Eles podem vir do nível do sistema operacional, como um tamanho de fonte base ou uma preferência de movimento reduzido. Eles também podem vir de extensões do navegador, como uma extensão que permite que o usuário crie o próprio CSS personalizado para uma página da Web.
  3. CSS criado. O CSS que você criou.
  4. Criado em !important. Qualquer !important que você adicionar às declarações de criação.
  5. Estilos de usuários locais !important. Qualquer !important que venha do nível do sistema operacional ou do CSS no nível da extensão do navegador.
  6. User agent !important. Qualquer !important definido no CSS padrão, fornecido 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 criado e o usuário tiver um tipo de regra !important no CSS personalizado, qual será o melhor CSS?

Teste seu conhecimento

Teste seus conhecimentos sobre as origens em cascata

Teste seu conhecimento sobre as origens em cascata e considere as seguintes regras de estilo 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 HTML a seguir:

<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 importante estilo do usuário local.
0,83 em
A origem do estilo do user agent perde para o estilo de usuário local importante.
2rem
Este estilo personalizado de usuário !important tem a origem mais específica.
2 canais
Esse estilo de autor faz parte da origem de autoria, que perde para o importante estilo de usuário local.
1 canal
Esse estilo de autor faz parte da origem de autoria, que perde para o importante estilo de usuário local.

Importância

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

A ordem de importância, do menos importante para o mais importante, é a 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 e regra de transição ativos têm maior importância do que as regras normais. No caso de transições, que têm maior importância do que os tipos de regra !important. Isso ocorre porque, quando uma animação ou transição fica ativa, o comportamento esperado é mudar o estado visual.

Como usar o DevTools para descobrir por que parte do CSS não está sendo aplicada.

O navegador DevTools geralmente mostra todos os CSSs que podem corresponder a um elemento, aqueles que não estão sendo usados riscados.

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

Se o CSS que você esperava aplicar não aparecer, isso significa que ele não corresponde ao elemento. Nesse caso, verifique em outro lugar, talvez um erro de digitação no nome de uma classe ou elemento ou algum CSS inválido.

Teste seu conhecimento

Teste seus conhecimentos sobre a cascata

A Cascade pode ser usada para...

Resolver conflitos quando vários estilos se aplicam a um elemento.
Esse é um dos objetivos principais: 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.
A pontuação e a 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 para ajudar a entender os aspectos da resolução de conflitos.

Recursos