Using Multiple CSS Classes on Elements (3/3)

[previous]

Saving Bytes by Using Multiple CSS Classes on Elements

If you look carefully at the style sheet used in the previous example, you will note that Layer1 through to Layer3 share common attribute values.

   position: absolute; 
   width: 200px; 
   height: 115px; 
   top: 120px;
   z-index: 1;

Knowing this we can create a new class

.pos {
   position: absolute; 
   width: 200px; 
   height: 115px; 
   top: 120px;
   z-index: 1; 
}

And then apply it to each element that we want to use those attribute values on by applying the classes as such:

<div id="Layer1" class="maintext pos">This 
  is some text. </div>
<div id="Layer2" class="maintext pos">This 
  is some text that is centered. </div>
<div id="Layer3" class="maintext pos">This 
  is more text. </div>

Let's check the result:

View CSS Example 3 (Opens in new window.)

Our document now comes in at 992 bytes, the lightest of all the examples we have presented! The thing of it is that we are working with a simple document. The savings would be even more considerable if we applied these same principles to a fully fledged Web site that is geared towards a standards only audience, simply because the technique has added flexibility to the more traditional approaches.

For example, let's assume we wanted to add a paragraph to the page, we could then create a class called center and have that class apply to Layer2 and the <p> tag as well.

<div id="Layer2" class="maintext pos center">This 
  is text in Layer2 that is centered. </div>
<p class="maintext center"> I was here</p>

View CSS Example 4 (Opens in new window.)

In this example, the div element Layer2 utilizes an extra class (pos) beyond that of the <p> tag; but because that specific class is also shared with Layer1 and Layer3 we are maximizing the usage of our CSS classes. Similarly because the center class is shared between the <div> and <p> elements, we are gaining coding efficiency, which in turn allows us to create lighter pages. In short, we are creating a CSS system that utilizes a re-usable component strategy for optimal results and best of all it works on the all the newer browsers.

Using this technique may cause a person to think about building pages in a slightly different way than we typically are accustomed too. In effect, we are moving from a mentality of "what works" to "what works best," which, in itself, is a good thing. It is good, because probably for the first time in the Web's short history, we can shift the focus to optimization and productivity, rather than worrying about whether it works or not.

Sure there are cross browser differences even today, even among the newer browsers, but by and large these are exceptions, rather than the rule. Generally we can code in one way and find that most things work well across the newer browsers, which of course is the whole point of using a Web standard.

Whether you are ready to embrace Web standards as "a way of being," right here and right now is really something only you can decide. But given the rapid decline of non standards based browsers it is almost certain that standards based techniques will become the norm--not the exception--in the not too distant future. As such we all need to think about the ways we currently build Web pages and move towards learning newer and better methods, which consistently demonstrate practical advantages over older techniques.

About the Author

Eddie Traversa is a multiple award winning developer who works as an independent Web consultant. He likes to play around with the latest technologies, and is currently writing a book on Dynamic XHTML with Jeff Rouyer of https://www.htmlguru.com/ fame. His experimental DHTML site is located at https://dhtmlnirvana.com/.

[previous]

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

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