CSS class hierarchy syntax

[Atli]

Hi.

Say I have these three classes:

.Paragraph { width: 200px; margin: auto; }
.Paragraph .Header { display: block; font-weight: bold; }
.Paragraph .Text { display: block; font-size: 90%; }

Is there a way to rewrite that syntax so that I can omit the parent class (.Paragraph) in the last two without making them global?

Like, for example:

.Paragraph { 
  width: 200px; margin: auto;
  .Header { display: block; font-weight: bold; }
  .Text { display: block; font-size: 90%; }
}

This won't work, but is there something else that might?

I've been trying to search for an alternate syntax, but all I can find are examples of the basic syntax. I even tried going through the W3C documentation but couldn't find anything useful.

I'm just wondering, because I have a lot of classes that need to be nested pretty deep and right now something like 90% of the CSS file seems to be nothing but repeated parent classes. Seems like an awful waste of bandwidth :P

[drhowarddrfine]

Yes.



:)

Back in a little bit.

[drhowarddrfine]

You can look into selectors but I'm not sure you'll find much relief. Classes are meant to be somewhat global themselves so if you are getting where a class in one instance is different than all other classes, then you should be using an 'id'.

[Atli]

Thanks for that.

It's not that the classes themselves are unique to an instance. It's more, I have a lot of very similar, if not identical, HTML and CSS class structures whose only difference is the CSS styles.

Like, for example, blog entries and news entries. Those are basically the same things, except that the CSS *styles* are different. I reuse the HTML for both, only swapping out the root CSS class.

Many of the deeply nested classes are unique to the root class tho, so I could probably use the wild-card char to cut down the repeating classes a lot.

That is:

.something { color: #00F; }
.root1 .first .second .third .something { color: #F00;  }
.root2 .first .second .third .something { color: #0F0 }
 

Could in many cases turn into:

.something { color: #00F; }
.root1 * .third .something { color: #F00;  }
.root2 * .third .something { color: #0F0 }
 

That might cut down the size of the CSS file a bit.

[drhowarddrfine]

Or #something1 and #something2 and move the common attributes further up the cascade but without the big picture it's hard to say. Selectors might be more your answer, don't know.