Multiple classes for an element 8

[petey]

Recently learned a good tip, not sure if this is generally known, but I don't see it mentioned often, so I'm posting it here for the benefit of all.

To give an element multiple classes, separate the classes with spaces:
<div class=&quot;important news&quot;>...</div>
<div class=&quot;important post&quot;>...</div>

Why? It can make CSS more efficient:
<style>
div.news{border:1px solid orange;padding:.5em;background:#cdc;}
div.post{border:1px dotted black;padding:.5em;background:#eee;}
.important{font:bold 120% sans-serif;color:red}
</style>

http://www.drpeterjones.com/

News and views of some obscure guy

 

[petey]

For reference, the corresponding inefficient CSS might look like this:
<div class=&quot;importantnews&quot;>...</div>
<div class=&quot;importantpost&quot;>...</div>

...

<style>
div.news{border:1px solid orange;padding:.5em;background:#cdc;}
div.post{border:1px dotted black;padding:.5em;background:#eee;}
div.importantnews{border:1px solid orange;padding:.5em;background:#cdc; font:bold 120% sans-serif;color:red}
div.importantpost{border:1px dotted black;padding:.5em;background:#eee; font:bold 120% sans-serif;color:red}
</style>

http://www.drpeterjones.com/

News and views of some obscure guy

 

[deecee]

i never knew this -- 1 more thing i have just learnt thanks to you. i can honestly say 2 sites of mine right now can cut out half their style sheets

<Signature>
Sometimes the Answer You Are LOOKING for can be FOUND BY SEARCHING THE FAQ'S @&%$*#!!!
</Signature>

 

[BillyRayPreachersSon]

Petey,

Nice post - Great tip!

Did you know that you can use any whitespace characters?

Dan

 

[EugenePaliev]

Thanks petey for a good tip and

++ for you!

Here is the link to specification:

http://www.w3.org/TR/html4/struct/global.html#h-7.5.2.

Here is the question - what browsers do support it?

Thanks again!

Good Luck!

http://eugene.paliev.com

 

[mwolf00]

Excellent

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[Vragabond]

EugenePaliev, I have advocated this method a few times. I have tested it with IE5.5, IE6, Mozilla 1.4 and 1.5, Opera 7, IE and Safari for Mac and it hasn't failed once. It is just a candy overlooked.

 

[philote]

Wow, that's too obvious, yet I never thought to try it or look it up. Thanks, petey!

BTW, does anyone know how good browser support for this is? I know it's part of the CSS standard, but...

Kevin
A+, Network+, MCP

 

[MichiganRon]

petey, you might want to think about turning this one into a FAQ. Seems like a bunch of people think it's a very useful tip!

Good job. Have another /art/star.gif!

-Ron

-We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are.

 

[petey]

Just submitted this as a FAQ. (faq215-4612)

http://www.drpeterjones.com/

News and views of some obscure guy