5

Qual é a melhor prática para trabalharmos com seletores no css?

Usar

.menu li { }
ou 
.item {} 
.menu .item { }
ou
.menu-item { } //aqui usamos para atribuir propriedades para as <li> por exemplo

Como seria a melhor prática para isso ?

2 Respostas 2

5

Melhor prática, seria precisar de menos código para que tudo funcione corretamente, do qual não precisaria de muitas classes, e sim de apenas uma classe pai acessando os filhos desta forma:

.menu li {
 //codigo
}

Assim você não precisa atribuir uma classe à sua <li>, você pode utilizar um caminho mais longo(mais detalhado) se desejar, por exemplo:

.menu > ul > li {
 //codigo
}

Ps: os > são apenas para indicar um caminho que está sendo percorrido, não são realmente necessários, apenas para entendimento.

No seu caso, remover a classe menu-item da <li> e utilizar no CSS .menu li reduz código html desnecessário, se tornando uma melhor prática.

1
  • 1
    A diferença entre usar ou não > é que em um caso qualquer descendente de .menu que for li é afetado, enquanto no outro o li deve ser filho de um ul que por sua vez é filho do .menu. Só esclarecendo...
    – mgibsonbr
    19/03/2014 às 17:33
3

A primeira opção me parece a melhor prática, pela seguinte razão:

  1. .menu li

    Aqui você tem um elemento (ou tipo de elementos) específico no qual você quer atribuir um estilo a todos os seus sub-elementos do tipo li. Para isso, basta dar a class menu ao seu elemento e automaticamente todos os seus lis ganham o estilo desejado.

  2. .menu .item

    Isso obriga você a adicionar a classe item a cada um dos seus lis além de adicionar a classe menu. Se você se esquecer de dar essa classe a algum item na lista, esse item terá um estilo diferente. A menos que isso seja por design (por exemplo, se você quiser dar destaque a algum elemento), é uma informação reduntante.

  3. .menu-item

    Semelhante ao item acima, só te alivia de ter que criar a classe menu. Mas o problema dos múltiplos lis cada um com sua classe permanece.

P.S. Enquanto estava escrevendo isso, o @Paulo Roberto adicionou uma resposta que sumariza isso perfeitamente:

Melhor prática, seria precisar de menos código para que tudo funcione corretamente

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .