CSS é um acrônimo para Cascading Style Sheets. O Cascading (cascateamento, cascata, você escolhe...) refere-se justamente a capacidade de criar seletores do tipo
.container .wrapper ul.lista > li:first-child span
que pode ser lido como "O span dentro do primeiro elemento filho direto de uma lista de classe .lista
dentro de um .wrapper
dentro de um .container
. Esse tipo de especificidade é um dos pormenores mais interessantes do CSS, e pode, ao mesmo tempo, ser extremamente poderoso e perigoso. O grande segredo, que talvez responda a sua pergunta, é saber quando usar um seletor rigido, conforme você colocou (o caso do meu exemplo), e quando ser mais flexível e simplesmente criar uma classe .meu_elemento
, atribuí-la ao <span>
e economizar um monte de linhas. O que nos leva às boas práticas (aquilo que eu considero como, pelo menos). Mas primeiro, vale a pena responder uma pergunta:
O código é meu?
Nada melhor do que este gif para explicar o meu ponto. Certa vez, tive que dar manutenção em um código que foi mantido por outro desenvolvedor durante cerca de 2 anos, e depois abandonado. Nesse tipo de situação, sempre procurei ser bem especifico (i.e., criar seletores que vão acertar a menor quantidade possível de elementos). Dessa maneira, é mais difícil de eu mudar algo sem querer.
Uma vez dito isso, e partindo do pressuposto que você quer sempre criar um CSS legível e de fácil manuntenção, vamos para as boas práticas:
CSS Reset
Independente do tamanho do seu projeto, se é o site de uma padaria ou o maior e-commerce da galáxia, use um reset. Resets essencialmente corrigem inconsistências entre browsers, como margens, alturas e etc. Alguns frameworks já vem com resets embutidos, o que nos leva ao segundo ponto.
Frameworks
Tem gente que torce o nariz quando escuta a palavra framework. Eu já acredito que, se alguém (ou uma equipe de alguéns) devotou tempo para desenvolver algo, cujo foco é a escalabilidade, porquê reinventar a roda? Foundation e Bootstrap talvez sejam uns dos mais famosos. Eu, particularmente, estou usando (e aprovando) o Suzy, que é um framework em SASS um pouco menos rigido. Ah...
Pré-processadores
Variáveis no CSS? Loops? Condicionais? Nesting? Pré-processadores lhe permitem tudo isso e mais um monte de outras vantagens. LESS e SASS são os mais famosos, acredito. Pré-processadores, além de tornar o seu código MUITO mais legível, lhe permitem um grau maior de propagação. Caso você opte por seletores mais específicos, o nesting dos processadores, junto com seus mixins
e extends
, tornam as coisas bem mais fáceis. Já que estamos falando de especificidade...
IDs ou Classes?
Já se sabe do berço que IDs
definem elementos únicos na sua página, enquanto classes são usadas para elementos que se repetem. Uma coisa que você NUNCA deve fazer é ter <div id="container">
duas vezes na sua página. Apesar disso funcionar, e de você não ter variações gritantes na performance, isto não é uma boa prática.
O ideal é sempre que você sentir que algo está se repetindo com frequência no seu CSS, é que aquilo torne-se uma classe, sempre que possível. Se, por razões, vários elementos conterem as propriedades float: left
e line-height: 1.5
, experimente criar uma classe contendo as duas propriedades e distribuí-la, conforme a sua lógica, pelo seu mark-up. Deixe os IDs
para elementos ou blocos de elementos específicos, que merecem uma atenção especial.
HTML e CSS inline
Se você está indo e vindo com frequência para o seu HTML, fazendo ajustes para que suas definições de estilo funcionem, você está fazendo isso errado. Procure, quando você pode, definir o seu HTML da maneira mais simples possível, agrupando elementos que se repetem e evitando ao máximo CSS inline.
Especificidade VS Generalização
Talvez aqui que esteja o ponto principal da pergunta. Em um código
<div class="images">
<img src="/img/1.jpg" alt="">
<img src="/img/2.jpg" alt="">
<img src="/img/3.jpg" alt="">
</div>
Devo usar, como seletor, .images img
, div.images img
, div.images > img
, ou talvez uma classe para as imagens?
Eu, particularmente, faço uma análise da hierarquia do meu código. Se eu sou genérico demais, e o meu projeto tende a aumentar, pode ser que o meu seletor acerte algo que eu não planejei. Por outro lado, se eu sou extremamente específico, talvez o meu código se torne muito repetitivo, pois estaria adicionando as mesmas prioridades a mais de uma classe ou elemento, o que causa um bloat extremo.
Basicamente, tudo depende de como você arquiteta o seu projeto, e de como ele cresce (lembre-se, nem sempre você tem controle sobre todo o HTML). Generalização pode ser bom, mas como tende a atingir mais elementos, você pode chegar ao ponto de ter uma <div>
que é apontada por 5, 6, 7 regras diferentes. Quanto mais regras em um elemento, mais difícil é de mantê-lo e alterá-lo. Especificidade impede que esse tipo de coisa aconteça, mas pode tornar o seu código repetitivo e nada escalável. Eu acredito que frameworks ajudam a contornar esse problema, mas nada que a própria experiência não te diga como fazer. O segredo é achar o ponto de equilibrio entre as duas coisas, sem afetar a performance, e sem fazer com que você arranque os cabelos.
EDIT:
Ainda em tempo: Encontrei um artigo que, apesar de antigo, é bastante interessante, e trata das especificidades dos seletores. Ele pode ser lido aqui.