[Javascript] using multiple class names

[Paul Novitski]

Mike,

I use multiple class names all the time with great success (although I 
admit I haven't done an exhaustive cross-browser compatibility study).

Of course it comes in most handy when you wish to independently vary 
multiple dimensions, e.g.:

<span class='size2 color1'>small white text</span>
<span class='size2 color2'>small red text</span>
<span class='size1 color2'>larger red text</span>

or:

<input class="required enabled"...
<input class="required disabled"...
<input class="optional enabled"...

Obviously if two attributes always go together (small white or large red), 
there's no point in splitting them into two separate vectors.

On the other hand, if you have exactly one attribute for each class name, 
it becomes arguable whether there's any point in encapsulating them in 
class names...  the justification being to mark up the HTML metaphorically 
so you can detail it with various specificity in CSS.

In a sense, you're merely extending HTML which provides similar tags with 
<big>, <strong>, <h1>, <h2>, etc.

All that said, there's a good argument made that you should name your 
classes by their purpose in your project (prompt, error, caption, headline) 
rather than by their attributes (size1, color2) so that as your 
presentation changes in the future you aren't left with nonsensical classes 
such as:
         .size1 {font-weight: bold;}
That is, design first for structure and meaning, then paint your 
presentation wholly with CSS.

Paul



At 12:25 PM 5/25/2004, Mike Dougherty wrote:
>Is there a reason why this construction would be bad?
>
><style>
>.size2 {font: x-small;}
>.sizeP1 {font: larger;}
>.weightP1 {font: bold;}
>.color1 {color: white;}
>.color2 {color: red;}
></style>
>[..stuff..]
>
><span class='size2 weightP1 color1'>small bold white text</span>
><span class='sizeP1 color2'>larger red text</span>