Efeito Cascata, Especificidade e Herança no CSS
Está cansado de ter varias dores de cabeça por seu código do CSS não fazer o que você quer?
Você estiliza todo seu código, aparentemente está tudo correto, quando você começa a perceber que seu código tem algum erro, e seu CSS não está funcionando adequadamente…Você tenta de tudo, e nada de funcionar e como última opção, resolve mudar a ordem do seu código, ou acaba tirando alguma coisa e com sorte ele funciona, porem você não entendeu o motivo, mas acaba deixando por isso mesmo.
Depois de ler esse artigo está na hora de você dar um “xauzinho” para os seus problemas.
Venho aqui informar que todo esses problemas, muitas das vezes é causado por um “carinha”, que às vezes costuma ser esquecido ou desconhecido, e acaba causando muitos problemas em sua vida.
Apresento a vocês: Ele, o Efeito Cascata (Cascade)!
Ele literalmente é a lei do CSS. Não é atoa, que é o responsável pela primeira palavra do nome (Cascading Style Sheets). Sem mais delongas, vamos entender o quão poderoso e incrível o CSS pode ser!
Efeito Cascata
Para controlar o efeito visual de um HTML utilizamos o CSS, porém existe regras distintas que servem para manipularmos o estilo de um elemento do documento. Agora, se existe mais de uma regra pra um seletor, qual regra prevalece? É aqui que o nosso Efeito Cascata começa a fazer a diferença, ele estabelece uma prioridade para aplicação de uma regra de estilo.
A cascata atribui um conjunto de regras para aplicar o peso e a ordem de atribuição do estilo em um elemento. Para isso usa conceitos como: importância, especificidade e a posição em que foi declarada.
Caso haja um conflito de regras, o seu navegador pode executar até quatro passos.
1. Analisa todas as regras.
2. Vê o nível de importância e a origem do elemento.
3. Ele vai comparar a especificidade das declarações com mesmo nível de importância(Aqui entra o cálculo de especificidade, do qual irei comentar mais adiante).
4. Caso tenha um empate no grau da especificidade, ele olha a ordem de declaração, a que for declarada por último será selecionado.
Hierarquia do Efeito Cascata
Imagine um código, onde uma tag <style> no head está dizendo que a cor de um parágrafo é azul, o arquivo.css declara que o parágrafo é rosa, e por último, um atributo dentro da primeira tag <p> do HTML, dizendo que a cor do parágrafo é verde. Como mostra a seguir:
Mas, diante desse cenário, qual cor prevalece?
Se você pensou na cor verde, acertou! A explicação da cor verde prevalecer sobre as demais, acontece por causa da primeira regra do CSS, onde explica que existe uma hierarquia do efeito cascata.
Em termos de nível de prioridade do Efeito Cascata, em ordem decrescente (mais importante em cima) temos:
1° Declarações com !important do usuário.2° Declarações com !important do desenvolvedor ( da qual vai ser melhor explicada quando entrarmos no tópico de especificidade).3° Folha de estilo do desenvolvedor:
a. Estilo inline (dentro de um elemento HTML,um atibuto).b. Estilo incorporado (<style>definido na seção head do documento).c. Estilo externo (importado ou linkado).4° Folha de estilo do usuário (do qual pode vincular ao browser).5° Folha de estilo do navegador.
Herança e Especificidade
Quando se fala sobre Efeito Cascata, não podemos deixar passar essas duas características de uma propriedade, até porque são elas que
controlam a cascata.
Especificidade
Como foi comentado anteriormente, os navegadores definem o grau de especificidade das regras. A especificação é voltada nas regras de composição de diferentes tipos de seletores.
Antes de mostrar o cálculo da especificação, vamos entender um pouco mais sobre o conceito de especificidade.
O resultado visual é :
O seletor #conteudo p.primeiro é mais específico que #conteudo p que por sua vez é mais específico que p. Por isso, é possível atribuir diferentes valores dentro de uma mesma div. Com os diferentes tipo de seletores foi possível uma maior especificidade, graças ao seu detalhamento no seletor.
O cálculo usado para a especificidade é baseado no nível desse detalhamento do seletor, pois a especificidade de um seletor é composta de 4 níveis :
1. Inline: 1000 pontos.
2. ID:100 pontos.
3. Classes, pseudo-classe e atributos: 10 pontos
4. Tag HTML:1 ponto.
A soma dos pontos indica o peso da especificidade do seu seletor. Fácil não é? Se você ainda não percebeu o quão simples é o processo, irá perceber agora com o cálculos da especificidade dos seletores a seguir:
#exemplo h1.titulo
Possui 1 ID,1 tag e 1 classe = 100+01+10 = 0111a:hover
Possui 1 pseudo-classe,1 tag = 10+01 = 0011div p
Possui 2 tag = 01+01 = 0002
Contudo, o cálculo da especificidade possui algumas exceções:
!important — Uma declaração usada no CSS com !important não entra no cálculo de especificação. Veja o exemplo:
Nesse primeiro caso, o parágrafo vai assumir cor azul, e tamanho 15 px. O exemplo mostra que o seletor div p, pelo fato de ser mais especifico, vai dar a cor azul e tamanho de 15px ao parágrafo.
Nesse segundo caso, o parágrafo vai ficar vermelho, porém com tamanho de 15 px. O exemplo mostra o !important atribuindo um valor de prioridade ao seletor p na aplicação da cor, pois antes da especificidade houve uma diferenciação em nível de importância.
:not — É uma pseudo-classe que isola algum elemento negando ele de seu argumento. Não é considerado um pseudo-classe no cálculo da especificidade. Porém, seletores que vem dentro da pseudo-classe de negação são considerados normais.
Herança
Visando deixar seus códigos mais compactos e práticos, apresento a vocês a herança do CSS. Acredito que boa parte das pessoas conhecem uma árvore genealógica… Aquela que tem toda uma linhagem familiar representada.
Sim, e o que tem haver com o CSS?
Venho de antemão te avisar que o CSS também é uma família, ou seja, sua incrível linhagem familiar também possui uma estrutura complexa da qual é de suma importância entendermos ela. Nesse tópico iremos entender melhor sobre como funciona essa tão comentada linhagem familiar conhecida como Herança.
No CSS na maioria dos caso, você herda as regras de um elemento pai. Caso não aceite uma herança, você pode tentar forçar herança, utilizando o valor inherit.
Hoje em dia é muito fácil ver a herança sendo usada pelos desenvolvedores, até porque se tornou um mecanismo de necessidade, graças a sua praticidade melhorando assim o tempo de produção, e é até vista como questão de organização do seu código. Exemplo:
<style type=”text/css”>
body {
color: blue;
}
</style>Nesse caso, todos os filhos de body recebem a cor azul por herança do pai.
Contudo, existem algumas exceções de herança, como as os valores das propriedades do box-model ( height, width, margin e padding), eles não recebem herança dos pais, a não ser que estejam sendo forçados.
É importante informar que o inherit é utilizado para fazer com que algum elemento filho ganhe de herança atributos do seu pai. O inherit procura a existência de propriedades no pai que podem ser afetadas, antes de atribuir um valor para receber de herança.
Resultado, ele recebeu herança da classe .teste, tanto da cor, como o seu tamanho:
Conclusão
O Efeito cascata junto com a especificidade e a herança acabam sendo importantes conceitos do CSS, fazendo com que você também perceba o quão inteligente e poderoso é o CSS. Então, quanto de antes conhecer sobre eles, melhor ficarão seus códigos. Inicialmente pode até parecer chato, mas com o tempo, você irar perceber o quanto eles facilitam a vida, e o quão incríveis são.
