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:

<td valign=”top” align=”right”><font size=”+1”><font color=”blue”>
<b>Foo</b></font></font></td>

CSS allows us to define that as:

td {

vertical-align:top;

text-align:right;

font-size:100%;

color:blue;

font-weight:bold;

} 

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.