Semântica - dos dois modos dá certo

[Kher 2]

Gostaria de um esclarecimento quanto a semântica de um código. Estou construindo um topmenu com a estrutura:

 

/*Top-Menu*/
#navigation{
height:35px; /*altura do menu*/
width: 300px; /*área total ocupada pelo menu*/
float: right;
}

#navigation ul{
width: 200px; /*largura da área ocupada pelos ícones*/
}

#navigation li{
float:left;/*flutuação à esquerda garante que os ícones fiquem na horizontal*/
margin-top:4px; /*margens dos ícones*/
list-style-type:none;
}

 

Esse topmenu será quatro pequenos ícones feito com imagens e efeito hover através do uso do background-position, porém posso construí-lo de ambos os jeitos abaixo só mudando o modo da escrita no código da página, minha dúvida é se existe um modo mais correto da escrita e por que, pois nos vários tutoriais que vi vejo mais o uso do código 1, chamar a classe logo após a id já criada.

 

1)

#navigation a.m1 {
background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}
#navigation a.m1:hover {background-position: left bottom;}

 

2)

a.m1 {
background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}
a.m1:hover {background-position: left bottom;}

 

3)

a#m1 {
background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}
a#m1:hover {background-position: left bottom;}

 

4) 3)

#m1 a {
background: transparent url(images/twitter.gif) no-repeat left top;
display: block;
height: 25px;
width: 62px;
}
#m1 a:hover {background-position: left bottom;}

[William Bruno 1501]

ai não estamos falando bem de semântica, mas sim de seletores inuteis.

veja:

#navigation a.m1 {

esse #navigation ali antes, é completamente inutil.

 

pois fazendo apenas:

a.m1 {

já conseguimos atingir nosso elemento.

 

note que essa hierarquia, de declarar o ID antes do elemento, e irmos aumentando a especificidade, só é boa qndo é necessária.

 

 

Se no rodapé, tivermos o mesmo a.m1, ai você precisaria replicar código, ou então fazer:

#footer a.m1, #navigation a.m1 {

oq claramente, poderia ser evitado, se tivessemos deixado o seletor "mais livre".

 

 

Pense sempre no reaproveitamento, e não desperdice especificidade. Qnto mais especifica uma regra, menos reaproveitável ela é.

[Thiago Souza_63114 1]

Olá acho que a opção 1 e 3 pois está no o padrão W3C as outras pode funcionar em alguns navegadores e em outros(o internet explore) dar problema.

só pra lembrar eu ACHO não tenho muito conhecimento mais a 1 e 3 e a que veja ser as mais certas :D.

 

Thiago Souza