CSS organisation with ids and classes

Question

What do you think is the best way to organise the CSS of a site?

I wanted to have ids followed by classes. However they are not exclusive.

Example:

h4 {
    padding: 5px 5px 5px 10px; 
    font-size: 110%;
    font-weight: bold;
    color: #000000;
    font-family: Arial,  Helvetica, sans-serif;
    margin: 0px 0px 5px 0px;
    background:transparent url(/images/example2.jpg) no-repeat scroll left top;
    text-transform: uppercase;
}
#rightcol {
    padding: 0px;
    width: 306px;
    overflow: hidden;
    float: left;
    margin: 0;
    border: 0;
}
#rightcol .container {
    margin: 5px 6px 0 0;
    padding: 5px 5px 0 5px;
    background: #FFFFFF;
}
#box_info {
   border: 1px solid #AAAAAA;
   background: #4F4F4F;
   line-height: normal;
   background: #4F4F4F url("../images/example.gif") repeat-x top left;
}
#box_info.container {
    margin: 10px 5px 10px 10px;
    background: transparent;
    padding: 0;
}

If there is a id infobox inside of a id right nav, the infobox's container will have the right nav's instead!

<div id="rightnav">
    <div class="advert">
      This needs to be here as sometimes I need it without borders margins etc.
    </div>
    <div class="container">
        <div id="otherbox">
            <div class="container">
            </div>
        </div>
        <div id="info_box">
            <h4>Related Info</h4>
            <div class="container">
                <span>Info in here</span>
            </div>
        </div>
        <div id="yetanotherbox">
            <div class="container">
            </div>
        </div>
    </div>
</div>

So my question is: Is there a way to make them exclusive (or private if that is a better term) or a better way of organising CSS.

Cheers in advance.

edit: Just to let you know, I like putting containers in for the simple reason of width. I want 100% width but I also want to indent my containers. I find adding padding to the box then adding margin to the containers I get what I desire. If you can tell me how to do this with just one div, then go ahead although I just want a way of organising CSS better, not html (as I believe I am doing it the best it can be, but take a shot at proving me wrong :) ). Thank you :)

Answer 1

One of the properties of cascading style sheets is that they cascade. Styles applied to parent elements also apply to their children. To change that, you will have to override the styles inherited from the parent by setting them again explicitly.

Answer 2

To target sub containers you could do #rightnav .container .container I think.

Answer 3

In your case when you want apply the #infobox .container styles you have to override the #rightnav .container with the "!important" rule. If you don't want any conflict between names, simply change, for example, the #rightnav .container in #rightnav .mainContainer. I hope I've written something not so obvious.

Answer 4

I think Natalie Downe has the right approach to CSS organization, which she details in her CSS Systems presentation here:

http://natbat.net/2008/Sep/28/css-systems/

The idea is that you move from the more general to the more specific in several chunks:

1. general styles
   • List item
   • body styles
   • reset
   • links
   • headings
   • other elements, tags
2. helper styles
   • forms
   • notifications and errors
   • consistant items with normally just one class
3. page structure
   • skeleton including page furniture
4. page components
   • most of your styles will be in here
5. overrides
   • as little as possible goes here