Para informações sobre por que não usar *
e porque >
é ótimo, é importante entender como o CSSDOM é feito.
Quando você tem um seletor, digamos div p .someclass
, o navegador precisa executar uma pilha de cheques.
Primeiro, ele irá reunir todos os elementos com .someclass
. Esta é uma operação bastante fácil. Em seguida, irá verificar todos os pais de todos os .someclass
es que reuniu e ver se ele tem um p
pai, descartando os que não têm. Em seguida, vai verificar todos os pais de todos aqueles p tags que tinham .someclass
filhos que ele reuniu novamente para div
pais. É assim que ele descobre onde ele está. Então, é claro, se você pudesse ter usado .specific-someclass
, isso teria sido muito menos caro.
É aqui que entra o valor de >
. Se você tiver div > p > .someclass
, quando o navegador verificar por p
pais de .someclass
, ele pode parar imediatamente. Ele só precisa atravessar um nível acima. Muito menos caro! Tente sempre usar o selector descendente directo quando possível, mesmo que não seja necessário.
Quando aparecer um *
, o browser terá de reunir todos os elementos da página. Esta é uma tarefa cara, por isso é melhor evitá-la. Se for #some-very-specific-id *
, a primeira coisa que o browser vai fazer é reunir cada elemento e depois verificar cada elemento para ver quais têm #some-very-specific-id
como antepassado. Cada um dos elementos sangrentos da página está sendo verificado. Bad juju.
Apologies if my info is out of date. Há muito tempo que eu não sabia nada sobre pintura CSS.