Using Multiple CSS Classes on Elements

The Current Way

The next major shift came when Cascading Style Sheets began to take off and layers became a popular mechanism for providing layout. CSS Classes were used to handle presentational material. Let us create an example of the typical techniques used with this approach:

This document weighs in at 1047 bytes and for all intents and purposes renders identically to the tables approach. Quite a savings already! But perhaps a better representation of current thinking would be shifting all style properties to a style sheet in order to separate style from content:

Shifting all the styles to a style sheet sees the total number of bytes rise to 1139 bytes, an increase over the previous method. However, the advantage here is that all styles are contained in one section, while the content is contained within another section, making the editing of the document far easier. Sometimes you have to lose ground in one area to gain ground in another.

The separation of content from design would typically see the style sheet be linked from the document. However for the purposes of this article, I am presenting the material in one document, so that viewers readily have access to the source code, rather than having to open separate documents.

The New Way

So far I haven't presented anything that hasn't been well advocated in the past, nevertheless it was important to provide some context for what is about to follow.

What is interesting to me is that the newer browsers afford developers techniques that can greatly optimize pages, but as yet haven't made their way into the mainstream of Web development practices.

One such technique is the use of multiple classes on elements. Yes, standards based browsers allow you to apply two or more classes to an element! For example, let's assume we have two custom classes in the style sheet named maintext and center respectively:

.maintext { font-family: "Courier New", Courier, mono; font-size: 14px; color: #FFCC99 } .center { text-align: center; }

Then what we could do is apply both classes to the same element with the following syntax:

<div id="Layer2" class="maintext center">

The element would render with both classes applied in Internet Explorer 5.0+, Netscape 7+ and Opera 7. But how does this help us when it comes to optimizing the number of bytes used on a page?