Se você planeja usar o CSS regularmente, precisa desenvolver uma compreensão do que é a especificidade e como ela é aplicada.
Além de carros alegóricos e posições, a especificidade pode ser uma das coisas mais difíceis de se acostumar, e muito menos dominar. Os seletores usados em seu CSS têm pesos diferentes e são controlados por especificidade. É por isso que, às vezes, quando você aplica uma regra a um elemento, isso não se reflete no seu design.
Se você já confiou na temida palavra-chave importante para hackear seu CSS, então este artigo é para você.
Para obter suas bases sólidas, você precisa saber como o navegador realmente lê CSS e como as regras são substituídas.
Em primeiro lugar, o navegador irá ler uma folha de estilo de cima para baixo, o que significa que com este código:
/*Line 10*/ul li a {color: red;}/*Line 90*/ul li a {color: blue;}A regra que você especificou na linha 10 será substituída e a tag de âncora será azul porque o navegador considerará regras mais abaixo no seu CSS para manter uma prioridade maior.
Isso também funciona com a ordem real em que você importa seus arquivos css, por exemplo:
Como você colocou o custom.css após o style.css, qualquer coisa que você escrever no style.css (descontando por enquanto, o peso dos seletores) será substituído e substituído pelo que está no custom.css, essa técnica é usada com frequência por criadores de conteúdo para dar ao usuário algum espaço para adicionar seus próprios estilos sem alterar o arquivo principal. (Observe, no entanto, que custom.css não substitui style.css por completo, apenas as regras que são especificamente substituídas serão substituídas.)
Tudo acima se aplica somente se você estiver usando o mesmo peso em todos os seletores. Se você está especificando IDs, classes ou elementos de empilhamento, então você está dando peso a eles, e isso é especificidade.
Existem quatro categorias que definem o nível de especificidade de um seletor: estilos embutidos (esses são às vezes usados pelo javascript), ID's, Classes e elementos. Como medir a especificidade? A especificidade é medida em pontos, com o maior valor de pontos sendo aplicado.
Sabendo disso, se você usar um seletor assim:
#content .sidebar .module li aSeu peso total é de 122 pontos (100 + 10 + 10 + 1 +1), que é um ID, duas classes e dois elementos.
ul li a {color: red;}Esse seletor terá um peso de 3, o que significa que apenas adicionando uma classe em outro lugar, você poderá substituí-lo.
.content #sidebar {width: 30%;}Este seletor tem um peso de 110 pontos, principalmente por causa do ID que adiciona 100 pontos do total de 110.
.post p:first-letter {font-size: 16px;}Este seletor tem um peso de 12 pontos, já que o pseudoelemento: primeira letra pesa apenas 1 ponto e a tag p também.
p {font-family: Helvetica, arial, sans-serif;}Esse seletor pesa apenas 1 ponto, esse tipo de seletor deve ser usado na parte superior da página quando você marca os estilos básicos que, mais tarde, podem ser substituídos para áreas específicas.
Tenha sempre em mente que, para sobrescrever um seletor de ID, você precisa escrever 256 classes para o mesmo elemento, assim:
#title {font-weight: bold;}.home .page .content .main .posts .post .post-content .headline-area .wrapper /* ... etc. ... */ .title {font-weight: normal;}Somente desta maneira o segundo seletor baterá aquele usando o ID.
Especificidade não é um aspecto chamativo do CSS, mas na minha opinião é a área mais negligenciada. Ter sua especificidade correta não apenas ajuda a evitar bugs, mas também acelera tanto o desenvolvimento quanto o site final.
Você faz uso excessivo de IDs ao escrever CSS? Você já voltou a ser importante? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de precisão via Shutterstock.