One feature designers often wished they had with style sheets are constants –- the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons.
CSS Constants - The CSS standard compliant approach (Page 2 of 7 )
CSS in itself is something like a constant. By defining the styles in classes and IDs or for the elements themselves, we spare ourselves the excruciating work of adding a lot of visual elements and attributes in the markup. In the days before CSS we had to do the following:
These constant settings are applied to each TD element. Another way:
td.special {
vertical-align:top;
text-align:right;
font-size:100%;
color:blue;
font-weight:bold;
}
The class special is a definition that can be reused for all elements, rather like a constant.
Using Classes
CSS classes could be one approach to mimic real CSS constants. Our box example above could be:
.box {
background:#ccc;
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
padding:.5em;
margin:.5em 0’;
}
We can add this class to any element to apply its definitions. It is also perfectly valid to add several classes, separated by spaces, to one element.
<h1 class=”box”>
<div class=”box warning”>
What we should avoid doing is to name the classes according to how they look, as it can be pretty confusing to see a <div class=”blue bold underline”> that is yellow, of normal weight and without an underline, after a new style guide came along and got applied.
Style Sheets 
/ 12 
HTML5 Boilerplate Introduction
