O significado da palavra CSS é Cascading Stylesheets (Folhas de Estilo em Cascata). O modelo de cascata CSS é o algoritmo para resolver os conflitos em várias regras CSS que são aplicadas num elemento HTML.
Para entender o modelo cascata CSS devemos analizar o seguinte exemplo:
p {
color: green;
}
p {
color: yellow;
}
Code language: CSS (css)No código acima aplicam duas regras ao mesmo elemento mas o resultado final é a cor amarela aplicada aos elementos de parágrafo. Para compreender o algoritmo em cascata como o navegador processa essas situações. O algoritmo em cascata possui 4 regras básicas:
- Posição e ordem de aparência: a ordem em que suas regras CSS aparecem
- Especificidade: um algoritmo que determina qual seletor CSS tem a correspondência mais forte
- Origem: a ordem de quando o CSS aparece e a sua origem, seja um estilo de navegador, CSS de uma extensão ou seu CSS de autoria.
- Importância: algumas regras CSS são mais pesadas do que outras, organizadas por
@layersou pela regra!important.
Posição e ordem de aparecimento
A ordem em que suas regras CSS aparecem e como elas aparecem em consideração pela cascata enquanto ela calcula a resolução de conflitos.
- Declarações
!important: Têm a maior prioridade, anulando todas as outras regras, independentemente da especificidade ou posição. - Estilos Inline (
style="..."): Prevalecem sobre estilos em tags<style>ou arquivos CSS externos, exceto quando há!important. - Estilos em Tags
<style>: Mais específicos que estilos em arquivos externos, com os últimos estilos na tag tendo maior prioridade. - Estilos em Arquivos CSS Externos: A ordem de carregamento dos arquivos e a ordem das regras dentro dos arquivos influenciam a prioridade.
- Ordem das Propriedades: Em caso de empate, a última propriedade declarada para um elemento prevalece (exceto com
!important).
Observações:
- A posição de elementos
<link>e<style>na página HTML afeta a ordem de carregamento e, consequentemente, a prioridade dos estilos. - A declaração de múltiplos valores para a mesma propriedade pode ser usada para criar fallbacks para navegadores que não suportam determinadas funcionalidades.
Especificidade
A Especifidade determina qual seletor é mais poderoso para especificar as regras CSS, usando um sistema de pontuação para fazer os cálculos. Ao tornar uma regra mais espeçífica, você pode fazer com que ela seja aplicada mesmo que algum outro CSS que corresponda ao seletor seja aplicado no CSS.
Ordem de Especificidade em CSS:
- ID (
#id): O seletor mais específico, com maior pontuação. Estilos aplicados a um ID são difíceis de sobrescrever. - Classes (
.classe), Atributos ([atributo]) e Pseudoclasses (:hover,:focus, etc.): Têm a mesma pontuação de especificidade. Combiná-los aumenta a especificidade da regra. - Elementos (ex:
h1,div,p) e Pseudoelementos (::before,::after)**: O tipo de seletor menos específico.
Observações:
- A especificidade é cumulativa: quanto mais seletores específicos você usar em uma regra, maior será sua pontuação e prioridade.
- Evite usar IDs para estilizar elementos, pois isso dificulta a reutilização e a sobrescrita dos estilos.
- Mantenha seus seletores simples e específicos o suficiente para atingir os elementos desejados, mas evite listas de seletores longas e complexas.
Origem
A origem do CSS é algo determinante para definir a ordem do CSS, o CSS podem ter diversas origens onde serão aplicadas no HTML.
- Estilos Básicos do Agente do Usuário (Navegador): Estilos padrão do navegador.
- Estilos de Usuário Local: Estilos definidos pelo sistema operacional ou extensões do navegador.
- CSS de Autoria: O CSS que você escreve.
- Autoria
!important: Regras!importantno seu CSS. - Estilos de Usuários Locais
!important: Regras!importantde extensões ou do sistema operacional. - Agente do Usuário
!important: Regras!importantdo CSS padrão do navegador.
Conclusão sobre o modelo de cascata CSS
Compreender o algoritmo da cascata é crucial para escrever CSS eficaz e solucionar conflitos de estilo. Além de ser uma das perguntas mais clássicas sobre CSS em entrevistas para desenvolvedor Front-end. Ao considerar a posição, especificidade, origem e importância das regras modelo de cascata CSS, você pode garantir que seus estilos sejam aplicados conforme o esperado, proporcionando uma experiência consistente e visualmente agradável aos usuários.
Conteúdo relacionado sobre modelo de cascata CSS:
Deixe um comentário