One technique that you can use when optimizing CSS is to merge common declarations into separate classes. Not unlike “orthogonalizing” a database into normal forms by eliminating redundant fields, this technique modularizes CSS. The feature that makes this possible is the ability to assign multiple classes to one element which the aforementioned CSS2-compliant browsers support.
For example:
<div class="nav align">...</div>This ability to reference multiple classes gives authors new options when styling their content. For elements that share the same styles (e.g., text-align:center) you can group these shared styles into one shared class.
So, this:
<style type="text/css">
.nav{color:red; text-align:center;}
.main{color:#000; text-align:center;}
.footer{color:#00f; text-align:center;}
</style></head><body>
<div class="nav"<...</div>
<div class="main">...</div>
<div class="footer">...</div>becomes this, after grouping the common center style into one shared class:
<style type="text/css">
.nav{color:red;}
.main{color:#000;}
.footer{color:#00f;}
.align{text-align:center;}
</style></head><body>
<div class="nav align">...</div>
<div class="main align">...</div>
<div class="footer align">...</div>The fourth .align class merges the common style (in this case, the text-align:center declaration) into a class now shared by three elements. The additional class saves space by eliminating redundant common declarations.