Seu terceiro exemplo é sobre encadear selectores simples através do combinador descendente, que é como uma versão mais lenta e mais fuzzier do combinador criança. Se você não suporta o IE6, você deve preferir usar o combinador filho.

Por exemplo, #twitter p vs #twitter>p. Primeiro, o browser reúne todos os elementos p, depois sobe um nível e verifica se este elemento tem o id “twitter”. Se não tiver, o navegador vai parar aqui se você tiver usado o combinador de crianças. Com o combinador descendente ele irá percorrer todo o caminho até o nó raiz (se ele não encontrar alguns #twitter em seu caminho). Então, os falsos positivos são sempre ligeiramente mais lentos com o combinador descendente.

O maior problema com o combinador descendente é sua confusão, o que aumenta a possibilidade de colisões. Como efeito colateral, criar estruturas arbitrariamente destacáveis torna-se muito mais complicado.

.container #twitter p também é excessivamente específico. Você realmente quer que p elementos dentro de #twitter pareça diferente se #twitter não está dentro de .container?

Outro problema é que .container é um local e não parte da estrutura. Então, sim… essa regra não é reutilizável.

CSS escalável = código reutilizável = classes. As regras baseadas em Id não são, por definição, reutilizáveis.

Leave a comment

O seu endereço de email não será publicado.