HTML + CSS structuring for hover effect on buttons

Question

I have a list of social media icons, which I know how to do, I’m not here to ask how to do, but rather, a more correct way, to minimize my work, if there is, of course.

My HTML is like this:

<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>

My 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, with this, the Facebook icon will change the position of the image with the Hover effect. Until then quiet, I just make this same process for each of them, icoTT, icoIns...

I wonder if there is an easier way, maybe a class that stores properties that will repeat on all Divs, something like this:

.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;}

Okay, that’s not correct, just to give you an example. Is there any way to minimize my work and code?

Answer 1

I think it works like this, adding more than one class to the elements:

<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>

Bootstrap uses this system.

Answer 2

I normally create a class for all the elements. In that case I would create . iconFooter and put in each li along with the class of each icone. Na . iconFooter you put all the attributes that would repeat. I advise you to take a look at the SASS or LESS that this will really save you a lot of trouble. I started using SASS in my projects and I tell you it was the best thing I did.

Another tip that I give you, in this case, is to create an Sprite with all the icones instead of using an image for each icone. You can set the background-position of each icone in your CSS with the normal position and Hover. Take a look at this site http://www.spritecow.com which is an essential tool to create sprites.

Success with the projects.