WDD 231: Desenvolvimento Frontend para Web I

S01 - Atividade de Aprendizagem: Especificidade do CSS

Visão Geral

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). O termo "cascata" (cascade) representa a ordem de prioridade das regras CSS que são aplicadas a um elemento específico. A regra CSS específica aplicada a um elemento é determinada pelo valor de especificidade da regra CSS.

Preparação

A especificidade é representada como um valor numérico de quatro partes que reflete o peso de uma regra CSS com base nos tipos de seletores usados. Quanto maior a especificidade, mais precisamente a regra seleciona um elemento, determinando assim qual regra tem precedência quando várias regras são aplicáveis.

Esta tabela organiza as partes da maior especificidade para a menor.

O valor de especificidade é calculado contando o número de seletores em cada categoria e atribuindo um valor a cada categoria. Então, os valores são combinados para formar um valor de especificidade de quatro partes.

Por exemplo, o seletor de regras CSS #sub-menu .nav a:hover tem um valor de especificidade de 0 1 2 1, pois contém:

• 1 seletor de ID (#sub-menu) — 0 1 0 0
• 1 seletor de classe (.nav) — 0 0 1 0
• 1 seletor de pseudoclasse (:hover) — 0 0 1 0
• 1 seletor de elemento (a) — 0 0 0 1

Resolvendo Problemas

Aqui estão duas recomendações para ajudar você a solucionar problemas de uso de regras CSS por seletores:

1. Use o painel Elementos – Estilos do DevTools no navegador. Ao inspecionar um elemento clicando no nome dele no painel Elementos, as regras CSS usadas são exibidas para você analisar e ativar e desativar para teste.

   

2. Use uma Calculadora de Especificidade de CSS - (conteúdo em inglês) para comparar a especificidade do seletor CSS.

   Observe que a calculadora exibe a especificidade como um valor de três partes (a b c), omitindo a categoria mais alta usada exclusivamente para estilos inline. Os estilos inline têm uma especificidade implícita de nível superior de (1 0 0 0), mas, como a calculadora se concentra em seletores escritos em folhas de estilo, esse valor de nível superior não é mostrado.

Aqui estão algumas outras considerações sobre especificidade:

• O seletor universal * não possui especificidade — 0 0 0 0.
• Combinadores de seletores CSS como div p (descendente), div > p (filho), div + p (irmão adjacente) e outros têm uma especificidade de 0 0 0 2, como esperado.
• Propriedades com !important são aplicadas mesmo que o seletor seja menos específico.

  Deve-se evitar o uso de !important porque pode dificultar a depuração e a manutenção do CSS. É melhor usar um seletor mais específico ou refatorar o CSS.

Instruções da Atividade

1. Abra esta página em uma nova aba do navegador.
2. Abra o DevTools do navegador.
3. No painel Elementos, selecione o primeiro parágrafo p.
4. Na aba Estilos, observe quantas declarações de color (cor) são usadas para o parágrafo. Isso representa a pilha CSS.
   Quantas cores são declaradas e fazem parte dessa pilha e por que elas estão nessa ordem?

   Existem 5 (cinco) declarações color: feitas para este elemento, as quais são ordenadas de acordo com o valor de especificidade do maior para o menor (a cor preta padrão atribuída ao navegador (agente do usuário) não é contada neste exemplo).

   1. blueviolet ➡️ CSS inline – 1 0 0 0
   2. peru ➡️ id - CSS integrado – 0 1 0 0
   3. red ➡️ id - CSS externo – 0 1 0 0
   4. forestgreen ➡️ classe - CSS externo – 0 0 1 0
   5. blue ➡️ elemento - CSS externo – 0 0 0 1
5. Use a Calculadora de Especificidade - (conteúdo em inglês) online para inserir os seletores e verificar a ordem da pilha.

   Por exemplo, o seletor .minhaClasse tem um valor de especificidade de 0 1 0 porque é um seletor de classe.