Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Sobre "image-replacement" e o uso de classes e id's

Olá, Na video aula o instrutor utiliza o seletor de classe para inserir, através do css, uma imagem para cada ícone no Image Replacement. Segue o código abaixo:

.icones-sociais a {
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -99999px;
}

.github {
    background-image: url(github.png);
}

.twitter {
     background-image: url(twitter.png);
}

.linkedin {
    background-image: url(linkedin.png);
}

Porém eu aprendi anteriormente que apenas se usa seletores de classe para agrupamentos de elementos que compartilham características similares. No caso das imagens, que são únicas para cada elemento não deveria ser usado #id's para inserir pelo css os ícones do github, twitter e linkedin?

Eu sei que visualmente não há a mínima diferença entre o uso de classes e id's porém não ficaria o resultado semanticamente errado?

3 respostas

Acho que no caso dos ícones valeria a pena manter como classe somente para o caso de aparecerem mais de uma vez na página. Pode não ser o caso atual mas num possível refactory futuro você não precisaria alterar este tipo de coisa no CSS.

Eu particularmente utilizo IDs para elementos que definitivamente só devem aparecer uma única vez. Se há alguma possibilidade de que o estilo seja utilizado mais de uma vez, mesmo que ainda não seja, eu utilizo classes.

solução!

Oii Luiz!

Sua dúvida é super válida!

O problema dos IDs é que, apesar deles também poderem ser utilizados como um seletor de CSS, esta não é sua única e exclusiva função.

Os IDs também servem para serem "targets " de âncoras. Como por exemplo:

<a href="#destaques">Destaques</a>
(...)
<h2 id="destaques">Destaques</h2>

Por ele ter isto como sua principal função, ele sempre deve ser único nos documentos HTML (o que pode ser uma coisa difícil de garantir quando se trabalha com linguagens de backend junto para construir as páginas).

E também é possível usa-los com o pseudosseletor :target.

Sem contar que o ID é um seletor de forte especificidade, o que pode tornar a questão da herança em cascata um pouco difícil de dar manutenção.

Por boas práticas que os desenvolvedores frontend mantêm, evitamos ao máximo estilizar elementos com o seletor ID e usamos e abusamos das classes, pois foi pra isto que elas foram criada! :D

Bom espero ter esclarecido as diferenças!

Abraços!

A sim! Ajudou bastante Vanessa! Muito obrigado! :D