Nested Classes?

Forum Moderators: open

Message Too Old, No Replies

Nested Classes?

How to point one class to another?

RossWal

11:44 pm on Jul 24, 2002 (gmt 0)

I'm working on a css layout and have reached a point where I have questions about styles. I have a site-wide style sheet that among other things defines various color shades as classes. Now I've made a local style sheet that defines some box layouts as classes. I want to be able to reference the colors defined in the first stylesheet without redefining them with their hex values in the second stylesheet.

I imagine this is a common need and wonder h0ow others have approached it. Any thoughts?

Thanks,
Ross

Knowles

11:50 pm on Jul 24, 2002 (gmt 0)

Why not just put it all in one style sheet and give them different class names. Of course I may not be thinking along the same lines as you since I do not understand exactly what you are asking.

madcat

12:16 am on Jul 25, 2002 (gmt 0)

You could have a site wide css style sheet linked in to the page like:

Then import local elements:

[edited by: madcat at 12:44 am (utc) on July 25, 2002]

papabaer

12:35 am on Jul 25, 2002 (gmt 0)

Back in the day, when I used to do service calls (gas water & electric) I carried every tool and every possible part I might ever need to complete a job. These went with me on all of my calls. I would go into the house and assess the call, and then head back out to my van to grab my tools and whatever parts I might need; after all, I had EVERYTHING right there. Believe me: I had a fully stocked service truck.

Occasionaly I would find that I had to climb up into an attic, or even down into a shallow crawl space to reach the problem area. These were difficult places to get to but since the specific task only required certain tools and a few select parts, I did not take everything I had back in the van with me into the far reaches of the dark and dank crawl space: I took just what I needed and nothing more.

A huge fully stocked, well equipped style sheet is a lot like my old service van: it has EVERYTHING needed to to the job, and then some! It's agreat feeling knowing you have all the tools for the job... But! Do you want to lug all those tools and parts down into the crawl space or up into the attic when all that is need can be carried in a small tool belt? I didn't think so.

Caching? Point to note: How are your visitors entering your site? Are they coming through the "front door" exclusively? Or have your SEO efforts finally paid off and visitors are accessing specific pages directly. Do they need their browsers to parse your 25kb, "every-thing-but-the-kitchen-sink" style sheet? Or will that directory, grouped element or page specific 1-2kb style sheet serve the purpose?

Don't be afraid to write small, limited use style sheets that get the job done without unloading the entire van.

sitewide.css
directory.css
color-schemes/red.css
color-schemes/blue.css
elements/forms.css
elements/lists.css
furniture/antique.css
furniture/modern.css
business/accounting.css
business/real-estate.css
arts/night.css
arts/cubist.css
layouts/three-column-header.css
layouts/two-column-liquid.css
layouts/shopping-cart.css

You can and should use specific style sheets for large sites that have a lot of diversity. Don't try to cram it all in a super-mega-master.css file... It doesn't make sense to when you might only need a few styles to do the job.

Now say you have a product page that offers several antique desks plus an order form:

[my-very-own-office.com...]

You might use:
<link rel="stylesheet" type="text/css" href="antique.css">
<link rel="stylesheet" type="text/css" href="../elements/forms.css">

Using tailored CSS for specific applications can make life much easier both now and in the future. Don't be afraid - just specific. Plan well, style happy! ;)

keyplyr

3:01 am on Jul 25, 2002 (gmt 0)

papabaer - are you saying that two external style sheets may be called from one webpage?

If so, I would think that one of them would need to be absent of body style declarations or use the same as the first sheet.

papabaer

3:22 am on Jul 25, 2002 (gmt 0)

Yes, that is the reasoning behind focused style sheets: you only script what is needed for the specific applications.

You might have a general style sheet that includes core body styles as well as styles for common elements. For instance, you might declare all of your element/font combinations, line-height, padding, etc., but leave the colors for individual color style sheets. This could be an efficient way to style pages that, depending on the theme, may have different color schemes. The default, or general styles for fonts and elements apply for any of the color-themed pages, but separate color-handling style sheets address the color schemes:

then you might have a red themed page that also includes unordered lists as well as definition lists:

If you have 300 pages on a site but use lists only on 5 pages, then why would you want to include your list styles in a global style sheet? The same thing goes with color variants: 300 pages total, 260 blue themed (blue.css), 20 red (red.css), 15 green (green.css) and 5 night themed (night.css) - Why burden your global style sheet with ALL the variants for all the elements when you can break them down into custom sets?

Multiple style sheets, when well planned are a great opportunity to reduce another kind of CSS code bloat: the "monster-super-sized something for every occasion, swiss army knife" style sheet! And to think, you only needed the corkscrew!!! ;)

papabaer

3:39 am on Jul 25, 2002 (gmt 0)

You might also have a page that uses a special background image as well as a few other variations from the global.css:

global:

body {
padding:0;
margin:0;
font:1em georgia, "Book Antiqua", palatino, serif;
}

p {
some styles
}
...etc.

stanley-turrentine.css:

body {
background:#8FBC8F url(stanley_turrentine.jpg) no-repeat;
}

In the stanley-turrentine.css the addition of a background image for the page is added; the body is referenced twice, once in the global (padding, font, margins) and a second time in the page/topic specific sheet.

Now lets say you had several pages about Stanley Turrentine: 2 general, one with several lists and a fourth with a form. For the two general pages:

For the page with the lists:

and finally for the page with the form:

This does not maen you NEED to use multiple style sheets, but it does provide examples where special use style sheets may be the best way to proceed. It all depends on the scope and variance of the site.

Nick_W

6:14 am on Jul 25, 2002 (gmt 0)

I occasoinally import as many as 3 stylesheets on a page. Once you get used to the cascade, it's a snip to redefine certain element properties and if you check for tedsters post about using the cascade (recent) you'll find lot's of interesting stuff there....

Nick

[edited by: Nick_W at 6:33 am (utc) on July 25, 2002]

keyplyr

6:25 am on Jul 25, 2002 (gmt 0)

> stanley-turrentine.css

LOL

papabaer

11:46 am on Jul 25, 2002 (gmt 0)

>> stanley-turrentine.css
I thought you might appreciate that... ;)

How about:
quartets.css
dave-brubeck.css
take-five.css

...hmmmmm,
time to crank up the turntable. :)

bird

2:36 pm on Jul 25, 2002 (gmt 0)

I think the original question had a different target than most of the answers so far, which I actually find a very interesting idea.

It is clear that on the element level, it is possible to have seperate style sheets that control individual aspects of each element. You can also define the color properties of a class in one stylesheet, and its geometrical properties in another etc.

But if I understand Ross correctly, then he would like to define classes with color names in one style sheet, and to reference those definitions in another one. This could be called a "top-down" approach to defining styles. Assuming we have declared some colors in one style sheet, then a hypothetical (but invalid) syntax for such a reference could look like this:

div.leftcolumn {width:##;margin-left:##;font-color:class(greenish_red);}

A theoretical alternative I just had to try out of curiosity was to assign several classes to an element at the same time, and it doesn't work either:

<div class="greenish_red" class="leftcolumn">

Obviuosly, we have to think the other way, and define classes for specific elements in the page, and then to declare the specifications of those classes in how many stylesheets as necessary and practical. In other words, we need to think "bottom-up".

One possible workaround to the dilemma would be to use nested elements (probably divs in most cases), which allows to seperate different aspects of their style. An inner div would then control the color and font used, while the outer can be used for positioning.

<div class="leftcolumn"> 
 <div class="greenish_red"> 
 blah 
 </div> 
</div>

papabaer

3:28 pm on Jul 25, 2002 (gmt 0)

When you reference multiple style sheets, you can freely apply multiple styles from any of the referenced .css files - just be sure to respect the cascade!

For example, say you reference the following three style sheets:

red.css
blue.css
layout.css

You might then style a <div> using classes from all three:

<div class="txt-red list-blue left-column-one">This uses styles from three individual style sheets. >> txt-red from red.css, list-blue from blue.css and left-column-one from layout.css</div>

bird

3:30 pm on Jul 25, 2002 (gmt 0)

Oooohhhh, you write them in the same class attribute.

Good to know, thanks! :)

starway

3:58 pm on Jul 25, 2002 (gmt 0)

Another good alternative is to use a combination of classes and ID's:

.one {font: bold 10pt arial,sans-serif; color: red}

#grey {color:#eee}

#nobold {font-weight: normal; text-indent: 20px}

<p class=one id=grey>
this paragraph text is not red but grey because the ID setting overrides the one from the class.
</p>

<p class=one id=nobold>
this paragraph text is not bold and has indent at the first line due to the same reason.
</p>

RossWal

4:18 pm on Jul 25, 2002 (gmt 0)

Thanks to all for the responses and interesting dialog. Thanks in particular to bird for clarifying my question and papabaer for providing the solution I was looking for:

I never would have thunk to try that.

RossWal

7:12 pm on Jul 25, 2002 (gmt 0)

I came up with another issue and an 'OK' solution. Thought I'd share it in case someone can use it or suggest a better approach.

I have one master stylesheet that defines site colors, fonts, and what nots. That will drive the general look and feel of the site. I'd like to avoid specifying colors anywhere but there. It contains class definitions like shade1 (Red), shade2 (gray), etc.

Now I'm creating more specialized stylesheets specific to pages or areas in the site (it's pretty big). I am creating container divs with borders. Since I don't want to specify the border colors in the specialized stylesheets, I've added class definitions like shade1shade2 to the master stylesheet like so:


.shade1shade2 {
 background: grey;
 border: 3px solid red;
}

Now I can make a div like this:


<div class="NewsItem shade1shade2>blahblah</div>

This mixes more style with the content than I'd like, but it's workable for me. Is there a better way? I'd prefer for the definition of NewsItem to reference shade1 and shade2, but that doesn't seem to fly.

papabaer

7:38 pm on Jul 25, 2002 (gmt 0)

Hey RW,

In your example:

<div class="NewsItem shade1shade2">blahblah</div>

The div is styled by two classes: NewsItem, the first in the cascade, and then shade1shade2, the second in the cascade. Cascade you say? Definately. This is an example of the inline cascade!

Lets say that the .NewsItem class came from the element.css style sheet and the .shade1shade2 class came from the colors.css style sheet. Both classes have been assigned to a single div and both will "deliver the goods" so to speak...

But what if there are background colors declared in both applied classes? Well, then the cascade will determine the which color prevails.

NewsItem {
font:1em verdana, arial, san-serif;
text-align:justify;
padding:3px
color:#fff;
background:#006;
}

.shade1shade2 {
background: grey;
border: 3px solid red;
}

The <div class="NewsItem shade1shade2"> will take all the styles properties from the first class, then over-ride the initial background color (#006;) and display a grey background with a 3px solid red border.

The Cascade is a powerful tool. It can be very tricky at times, depending on the element and browser, but once you get comfortable with the concept, you will find it much easier to create smaller, specialty style sheets.

Mixing .class and #id is perfectly acceptable as well - providing you understand that only a single instance of an #id can be used on each page. You may have 500 pages that all use the #banner id, since there is only a single instance on each of the 500 pages. It's all in how you choose to manage your styles.

RossWal

10:28 pm on Jul 25, 2002 (gmt 0)

Thanks pb. I was a little perplexed until I figured out the cascade order comes from the order in which classes are defined in the style sheet not the order of the class attributes in the <div> tag. Confusion was compounded by the fact that classes specified locally in the <style> section in the html doc have precedence (further along in the cascade cycle) over those brought in with an @import, regardless of the placement of the @import.

At first this bothered me and seemed counterintuitive... I expected the <div> statement to control things as the html is interpreted. Then I decided it's for the best. Regardless of how the html is coded, I can have either the local styles supercede the sitewide ones, or the other way around, depending upon the structuring of the @import statements.

Now the question becomes one of phylosophy. Should the sitewide stylesheet be the overlord, winning all conflicts, or should the local styllesheets override it at will? Hmmmm.

papabaer

10:43 pm on Jul 25, 2002 (gmt 0)

Now we get to !important stuff: [w3.org...]

madcat

4:11 pm on Jul 27, 2002 (gmt 0)

I need a bit of clarification on this I guess. By the way this thread is right on...

When linking in style sheets, is it correct to say that using:

...will only allow you to call certain styles from each sheet explicitly, whereas, using:

@import "...";
@import "...";
@import "...";

...will automatically cascade with your imported style sheets without having to make a call to them? Or which method is better?

copongcopong

10:52 pm on Jul 27, 2002 (gmt 0)

Here is another thing you may try in your css:

.box1, .box2 {
background-color: #ffffff;
border: 1px solid #999999;
padding:3px 10px 2px 10px;
margin-bottom:5px;
width:100%;
color: #000000;
text-align:right;
}

span.box2{
width:70%;
float:right;
padding-right:20px;
margin-top:10px;
}

to overwrite the other properties .... its self-explanatory ... =)

lesser code is better.

papabaer

11:26 pm on Jul 27, 2002 (gmt 0)

When linking in style sheets, is it correct to say that using:
<link rel ... />
<link rel ... />
<link rel ... />
<link rel ... />
...will only allow you to call certain styles from each sheet explicitly, whereas, using:
@import "...";
@import "...";
@import "...";
...will automatically cascade with your imported style sheets without having to make a call to them? Or which method is better?

Either, or both! Mix n' match if you will. I use @import the majority of the time, but I have many pages where CSS is culled from files referenced by both methods.

Use the top-down approach for cascading issues: last parsed prevails, unless !important is assigned upstream in an earlier sheet.

Review the W3C explanation of the !important rule. Be aware that the end-user can set their own CSS preferences for their browser. This is extremely easy using Opera. If you have sized text within a fixed size element such as a div for example, your text might break out of the containing box if an end-user specifies a larger font than the fixed-dimension container can hold.

We all know that is best to let font-sizng up the end-users preference. We also know that this does not always happen and with some designs there are certain elements where fixed size is imperative.

By deploying the !important rule, you can override end-user settings - which is after all, the last segment of the cascade. However, the end-user does have the final say if they are savvy enough to use !important in their own CSS settings.

Once again because it is... !important
[w3.org...]

To apply your own style sheet and surf using your own CSS preferences Opera users can Alt + P / Preferences/Page Look/My Style Sheet - In the end, the user rules!

- papabaer

papabaer

11:42 pm on Jul 27, 2002 (gmt 0)

One bit of advice when creating style sheets: I've found it to be useful to order my styles with the DOM in mind. There are instances where this is not always possible, but I prefer to begin my style sheet with a body {}, then h1,h2 {} and so on. It is easy to get a bit tangled if you are a style-a-holic, or should I say style-a-phile...! But with careful planning you can script style sheets that follow a logical, orderly cascade, making it much easier when multiple sheets are called upon.

Style with DOM and page structure in mind! Order those styles into a logical fashion... You will be glad that you did.

style-a-holic and style-a-phile:
- papabaer ;)

rewboss

7:57 am on Jul 28, 2002 (gmt 0)

Go easy on the !important stuff, and only use it if it really is !important. If someone has gone to all the trouble of creating their own stylesheet, it's probable that they have really good reasons (visual impairments, for example).

Imagine a user, fed up of white text on black backgrounds, has the following in his style sheet:

body { background-color: #fff; background-image: none; color: #000; }

...and you have something like this:

body { background-color: #000; color: #fff !important; }

What will happen? The user will not be able to read your text, which will be white on white.

That's a very crass (and obvious) example, but the sort of thing you have to bear in mind.

Nested Classes?

How to point one class to another?

RossWal

Knowles

madcat

papabaer

keyplyr

papabaer

papabaer

Nick_W

keyplyr

papabaer

bird

papabaer

bird

starway

RossWal

RossWal

papabaer

RossWal

papabaer

madcat

copongcopong

papabaer

papabaer

rewboss

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week