Connecting Tech Pros Worldwide Forums | Help | Site Map

CSS class hierarchy syntax

Atli's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,748
#1: Dec 27 '08
Hi.

Say I have these three classes:
Expand|Select|Wrap|Line Numbers
  1. .Paragraph { width: 200px; margin: auto; }
  2. .Paragraph .Header { display: block; font-weight: bold; }
  3. .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:
Expand|Select|Wrap|Line Numbers
  1. .Paragraph { 
  2.   width: 200px; margin: auto;
  3.   .Header { display: block; font-weight: bold; }
  4.   .Text { display: block; font-size: 90%; }
  5. }
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's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,566
#2: Dec 27 '08

re: CSS class hierarchy syntax


Yes.



:)

Back in a little bit.
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,566
#3: Dec 27 '08

re: CSS class hierarchy syntax


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's Avatar
Moderator
 
Join Date: Nov 2006
Location: Iceland
Posts: 3,748
#4: Dec 28 '08

re: CSS class hierarchy syntax


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:
Expand|Select|Wrap|Line Numbers
  1. .something { color: #00F; }
  2. .root1 .first .second .third .something { color: #F00;  }
  3. .root2 .first .second .third .something { color: #0F0 }
  4.  
Could in many cases turn into:
Expand|Select|Wrap|Line Numbers
  1. .something { color: #00F; }
  2. .root1 * .third .something { color: #F00;  }
  3. .root2 * .third .something { color: #0F0 }
  4.  
That might cut down the size of the CSS file a bit.
drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,566
#5: Dec 28 '08

re: CSS class hierarchy syntax


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.
Reply