Using Multiple CSS Classes on Elements (1/3)

[next]

Saving Bytes by Using Multiple CSS Classes on Elements

By Eddie Traversa ([email protected])

Debates around the use of W3C Web standards by developer's/designers often focus around the pros and cons of using standards on Web pages. Typically, this debate is performed at an intellectual level, rather than providing a clear and concise method that consistently demonstrates the benefits of using W3C standards. It is one thing to argue the benefits of Web standards, quite another to clearly demonstrate why Web standards can benefit us all.

From my limited perspective, we are on the brink of new era in the development and design of Web pages, simply because the landscape we typically cater to has changed considerably in the past year. For one thing we see that Netscape 4's market share has dropped considerably down to around the 2% mark. Internet Explorer 4 also suffers a similar fate (https://www.thecounter.com/stats/2002/November/browser.php).

Combine this decline with the advent of the newer generation browsers such as Internet Explorer 6, Netscape 7 and Opera 7 and it is not difficult to see that the Web world is primed to take advantage of standards based approaches to building Web pages. All that remains to do is provide some clear practical educational material to make the process of conversion to standards a little less painless.

In this article, I am going to explore the concept of applying multiple class names on elements and demonstrate how utilizing that technique can bring about significant reductions in the number of bytes a Web page utilizes. We are going to begin by taking a trip down memory lane (at least for me) and look at a simple Web document that uses tables for layouts and font tags for presentational markup.

The Old Way

In the not so distant past, the majority of developers and designers used a tables-based approach for layout and font tags for presentational markup. More often than not, this approach produced code that was barely readable and consequently difficult to understand. Nonetheless, it was and some would argue still the predominate method of providing layout and presentational aspects to Web documents and by and large served our Web building goals. To reacquaint yourselves with this method, see the following example.

View Tables Example 1 (Opens in new window.)

Our first example weighs in at 1876 bytes. While it is true that table optimization techniques can be used on this page that would reduce the number of bytes used, the document itself suffices as being representative of the general techniques employed with table design. What I mean by that, is that all the examples presented here could still be optimized further--for example we could rid ourselves of white space as one optimization technique--but that would not be the point; as we are far more interested here in a particular technique for page byte optimization rather than a compendium of optimization techniques. With that in mind let's push on.

Most developers of today are utilizing DTD's in their Web documents, so let's add a DTD to the first example and view the result.

View Tables Example 2 (Opens in new window.)

The inclusion of a DTD sees the number of bytes used rise to 1941 bytes. However let's remember that DTD's were not widely used when tables and font tags strategies were employed. Therefore feel free to compare the results presented later in this article with either of the above examples. I will leave you to decide with is the fairer comparison, but please remember that XHTML documents must include a DTD or Schema and the CSS examples are written in XHTML.

[next]

Created: November 27, 2002
Revised: November 27, 2002

URL: https://webreference.com/authoring/style/sheets/multiclass/