Question

I’m trying to tidy up my html, css and javascript. I know that it is sloppy, but I can’t fathom a cleaner way to write things. I can see hat there must be tidier ways though.

http://jsfiddle.net/craigzilla/hk8SR/

Any suggestions?

#btn1 {
height: 88px;
width: 110px;
float: left;
position: absolute;
}
#btn2 {
height: 88px;
width: 110px;
float: left;
position: absolute;
left: 110px;
}
#btn3 {
height: 88px;
width: 110px;
float: left;
position: absolute;
left: 220px;
}
.rollover1 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
.rollover2 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}
.rollover3 {
background-image: url(http://www.placehold.it/110x88);
height: 88px;
width: 110px;
opacity: 0;
float: left;
}

Answer 1

Well first of all, you can assign multiple selectors the same rule. Something like this:

.rollover1, .rollover2, .rollover3 {
    background-image: url(http://www.placehold.it/110x88);
    height: 88px;
    width: 110px;
    opacity: 0;
    float: left;
}

Even better than that, though, you could eliminate the need for .rollover1, 2, and three and just make a .rollover class that you apply to everything.

If you need a different image for each rollover, then this would work:

.rollover1, .rollover2, .rollover3 {
    height: 88px;
    width: 110px;
    opacity: 0;
    float: left;
}
.rollover1{
    background-image: url(http://www.placehold.it/110x88);
}
.rollover2{
    background-image: url(http://www.placehold.it/110x88?2);
 }

You can do the same with your IDs.

If you’re seriously looking to clean up your styles, look in to “object oriented CSS” (Note: I think the name “OOCSS” is HIGHLY misleading, but it is still good practice). Object Oriented CSS, basically changes the approach to writing CSS. Rather than saying “this CSS is for my button that is blue and has a margin of 5px” and outputting code like this:

#myBlueButton{
    background-color:#00f;
    margin:5px;
}

<button id="myBlueButton">

You write CSS like this:

.blue{
    background-color:#00f;
}
.margin5px{
    margin:5px;
}

And then your button will look like this:

<button class="blue margin5px">

This encourages seperation of concerns and symantic classes, while reducing your need for IDs and reducing the need for overly specific CSS selectors. It also allows you to easily re-use your CSS styles without having to repeat yourself.

Even better than OOCSS, though, look in to things like SASS and LESS Which allow you to write rules that will generate your CSS for you.