CSS e jQuery: .name vs name ^ = (ou seja, classes vs “matrizes de id”) - jquery, html, css, jquery-seletores, css-seletores

Considere os três cenários a seguir:

(1):

<div class="zones"></div>
<div class="zones"></div>
<div class="zones"></div>

vs (2):

<div id="zone1"></div>
<div id="zone2"></div>
<div id="zone3"></div>

vs (3):

<div id="zone1" class="zones"></div>
<div id="zone2" class="zones"></div>
<div id="zone3" class="zones"></div>

Dado que você pode segmentar cada <div> usando em conformidade ou o .zones ou div[id^=zone] seletores (ambos em CSS e jQuery),

Existe alguma vantagem de usar (1) ou (3) sobre (2)?

Respostas:

3 para resposta № 1

O objetivo de um ID é identificar de forma exclusivaelemento. Se você não precisa identificar cada elemento individualmente, não há razão para dar a cada um deles uma identificação. Da mesma forma, se você não precisa associar os três elementos uns com os outros, não há razão para atribuir-lhes um nome de classe comum.

Se você está indo para a opção 3 porque você precisa de IDs e classes, é quando você considera a diferença entre os seletores.

Em CSS, .zones é menos específico do que div[id^=zone] por causa do seletor de tipo ausente (uma classeselector e um selector de atributos são igualmente específicos por si próprios). Claro, se você quiser equilibrar a especificidade de ambos os seletores, você pode considerar div.zones ao invés de .zones.

Os seletores de classe também são geralmente otimizadosEles são muito mais fáceis de comparar, tanto em CSS quanto em jQuery. A diferença resultante no desempenho não é significativa, mas se você puder corresponder exatamente os mesmos elementos por classe, não há razão para não usar um seletor de classe sobre um seletor de atributo Assim, novamente, se você estiver indo para estilizar ou manipular os três elementos como um grupo, atribua a eles um nome de classe e selecione por essa classe.

---

0 para resposta № 2

Depende completamente da situação.Pessoalmente, eu não me importaria em salvar esses nanossegundos e gostaria de escrever um html mais limpo que todo desenvolvedor entende (mais baseado em classes porque id pode ser usado mais durante o javascripting)

Você pode, obviamente, escrever seu html inteiro com classe, tags,seletores filho + irmãos,n-criança.

apenas um exemplo:

.mainclass > .innerclass > a{
cloro:red;
}

a mesma coisa poderia ser feita se você atribuir id=something to a tag:

#something{
color:red;
}

use class: somente quando vários elementos dom compartilham a mesma característica.

use Id "s: somente quando diferentes elementos dom compartilharem características únicas.

Mas, no fim das contas, tudo se resume a escrever códigos mais limpos, mais simples e compreensíveis.

---