CSS tip: Group identical classes together

  • Article

There are often cases where the same CSS style is defined multiple times for different classes. Consider grouping selectors to avoid the redundancy. This also helps optimize the size (and improve manageability) of the CSS. (In fact, CSS optimizers use this technique but to a more extreme degree).

Be aware that one of the benefits (and drawbacks) is that any change to the combined class will affect all associated selectors.

Instead of:
h1
{
    color: black;
    background: white;
}

.blackonwhite
{
    color: black;
    background: white;
}

h2
{
    color: black;
    background: white;
}

Try combining them as follows:

h1,
.blackonwhite,
h2
{
    color: black;
    background: white;
}