Projections

CSS tip: Group identical classes together

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

Published Wednesday, April 25, 2007 12:55 AM by alexdan
Filed under:

Comments

No Comments
Anonymous comments are disabled

© 2009 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Microsoft
Page view tracker