| The CSS standard compliant approach |
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:
These constant settings are applied to each TD element. Another way:
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:
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
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.
<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. |
| Return to Listing |