One of the most-forgotten best practices in CSS is reusing your code when your elements aren’t exactly the same. Let’s take these two buttons as an example. We have two very similar buttons, the only difference is the background color.

Blue…

class=”blueButton”

…and orange.

class=”orangeButton”

Let’s look at the CSS that it took to get us here.

.blueButton {
    color: #ffffff;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-decoration: none;
    background: #5169e0;
}
.orangeButton {
    color: #ffffff;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-decoration: none;
    background: #dea652;
}

You’ll notice that the styles for both classes are almost exactly the same, except for the background declaration.

This might not be a big problem if you’re running a small blog, or if you never ever plan to change the design of your buttons. But what if you want to suddenly go through and change the border-radius on all your buttons? You need to go find each and every declaration of a new button in the CSS, and hope you don’t miss one. Or just do something like this

.button {
    color: #ffffff;
    padding: 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    text-decoration: none;
}
.blue {
    background: #5169e0;
}
.orange {
    background: #dea652;
}

class=”blue button”

class=”orange button”

The buttons look exactly the same, but from a developer perspective, it is far easier to maintain.