3

Tenho uma listagem de ícones de redes sociais, a qual eu sei fazer, não estou aqui para perguntar como fazer, mas sim, uma forma mais correta, para minimizar o meu trabalho, se houver, claro.

Meu HTML está assim:

<ul>
  <li class="rodapeTitulos">Redes Sociais</li>
  <li class="icoFB"></li>
  <li class="icoTT"></li>
  <li class="icoIns"></li>
  <li class="icoPlu"></li>
  <li class="icoPin"></li>
</ul>

Meu CSS:

.icoFB{
  background-image: url("../imagens/fb.jpg");
  background-repeat: no-repeat;
  background-position: center 0;
  width: 43px;
  height: 43px;
  float: left;
  margin-right: 1px;
}

.icoFB:hover{background-position: center 43px;}

Ok, com isso, o ícone do Facebook irá mudar a posição da imagem com o efeito Hover. Até ai tranquilo, é só eu fazer esse mesmo processo para cada um deles, icoTT, icoIns...

Gostaria de saber se há alguma forma mais fácil, talvez uma classe que armazene as propriedades que irá se repetir em todas as divs, algo mais ou menos assim:

.icoRodape{
    background-repeat: no-repeat;
    background-position: center 0;
    width: 43px;
    height: 43px;
    float: left;
    margin-right: 1px;
}
.icoRodape.icoFB{background-image: url("../imagens/fb.jpg");}
.icoRodape.icoTT{background-image: url("../imagens/tt.jpg");}
.icoRodape.icoIns{background-image: url("../imagens/inst.jpg");}
.icoRodape.icoPlu{background-image: url("../imagens/gpl.jpg");}
.icoRodape.icoPin{background-image: url("../imagens/pin.jpg");}
.icoRodape:hover{background-position: center 43px;}

Ok, isso não está correto, só para dar um exemplo mesmo. Há alguma forma de minimizar meu trabalho e o código?

2 Respostas 2

4

Acho que funciona assim, adicionando mais de uma classe aos elementos:

<ul>
  <li class="rodapeTitulos">Redes Sociais</li>
  <li class="icoRodape icoFB"></li>
  <li class="icoRodape icoTT"></li>
  <li class="icoRodape icoIns"></li>
  <li class="icoRodape icoPlu"></li>
  <li class="icoRodape icoPin"></li>
</ul>

O Bootstrap utiliza este sistema.

2
  • Olá. Sim, se eu utilizar as duas classes no HTML, ele irá herdar ambas. Minha dúvida é mais em questão da estruturação no CSS mesmo, para não ter que colocar as propriedades de cada classe mais de uma vez, sendo que só uma uma delas. Commented 25/07/2014 às 19:13
  • Esquece o que eu falei, hehe. Funcionou 100% :D Commented 25/07/2014 às 19:16
2

Eu normalmente crio uma classe para todos os elementos. Nesse caso eu iria criar .iconFooter e colocar em cada li junto com a classe de cada icone. Na .iconFooter você coloca todos os atributos que iriam repetir. Eu aconselho você dar uma olhada no SASS ou LESS que isso realmente vai lhe poupar muito trabalho. Eu começei a usar SASS em meus projetos e te digo que foi a melhor coisa que eu fiz.

Outra dica que eu te dou, nesse caso, é criar um sprite com todos os icones em vez de usar uma imagem para cada icone. Você pode setar o background-position de cada icone no seu CSS com a posição normal e hover. De uma olhada nesse site http://www.spritecow.com que é uma ferramenta essencial para criar sprites.

Sucesso com os projetos.

2
  • 1
    Eu trabalho com front-end a cerca de 6 meses, e já ouvi falar muito do SASS e LESS, e com certeza, nos meus próximos projetos irei me utilizar deles, estava lendo e parece ser muito útil. Muito obrigado pela dica. :) Commented 25/07/2014 às 20:03
  • 1
    Legal Felipe. Seja bem vindo então :) Da uma pesquisada em criar sprites que vai te ajudar muito e com certeza seus projetos vão ficar melhores.
    – codajoao
    Commented 25/07/2014 às 20:11

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 .