CSS Coding Guidelines
- Prefer Styles to HTML Tags
- Encapsulate Styles
- Use Cascading Wisely
- Coding Style
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
A repeating theme throughout this series is that, to improve the maintainability and reusability of code, you should standardize on a set of coding style rules, document these rules, and then enforce their use. The following sections briefly discuss some coding conventions for Cascading Style Sheets:
- Prefer styles to HTML tags.
- Encapsulate styles.
- Use cascading wisely.
- Use good coding style.
These "rules of thumb" reflect lessons that I learned by using CSS in dozens of projects over the past several years, and they represent a proven approach to improving the maintainability and reusability of CSS code.
Prefer Styles to HTML Tags
When both HTML and CSS offer ways to do the same thing, use CSS. In general, style sheets are much better for manageability, performance, and code reusability because they allow developers to aggregate styles rules in a single location instead of scattering them throughout the documents.
For example, the code snippet in Listing 1 is a small navigation menu. Because the effect of the <font> tag does not cross table cell boundaries, the contents of each <td> element must have their own individual font tag.
Listing 1: Navigation Menu Using HTML <font> Tags
<head>
<title></title>
</head>
<body>
<table width="90%" border="0">
<tr>
<td height="15" align="center" valign="middle">
<font face="Impact">
<a href="home.asp">Home</a>
</font>
</td>
</tr>
<tr>
<td height="15" align="center" valign="middle">
<font face="Impact">
<a href="news.asp">Industry News</a>
</font>
</td>
</tr>
<tr>
<td height="15" align="center" valign="middle">
<font face="Impact">
<a href="email.asp">Contact Us</a>
</font>
</td>
</tr>
<tr>
<td height="15" align="center" valign="middle">
<font face="Impact">
<a href="index.asp">Site Map</a>
</font>
</td>
</tr>
</table>
</body>
Compare the previous code with the HTML in Listing 2, which uses an embedded style sheet to bind the style rules to the <td> elements in the navigation menu. Not only is the code 30 percent shorter (and, therefore, faster to download), but maintenance is simpler as well because the style rules appear in only one place. Finally, the code is cleaner and easier to read.
Listing 2: Navigation Menu Using Embedded CSS
<head>
<title></title>
<style>
.MenuItem {
font-family : Impact;
}
td {
height : 18;
align : center;
valign : middle;
}
</style>
</head>
<body>
<table width="90%" border="0"" class="MenuItem">
<tr>
<td>
<a href="home.asp">Home</a>
</td>
</tr>
<tr>
<td>
<a href="news.asp">Industry News</a>
</td>
</tr>
<tr>
<td>
<a href="email.asp">Contact Us</a>
</td>
</tr>
<tr>
<td>
<a href="index.asp">Site Map</a>
</td>
</tr>
</table>
</body>