CSS organisation with ids and classes - css

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

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:
general styles
List item
body styles
reset
links
headings
other elements, tags
helper styles
forms
notifications and errors
consistant items with normally just one class
page structure
skeleton including page furniture
page components
most of your styles will be in here
overrides
as little as possible goes here

Answer 2

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 3

I think trying to organize your cascade rules by class and id might be miss guided. You really should just be thinking of the actual cascade of things rather than trying to make them private.
For example the following:
#container
{
width: 600px;
margin: auto;
}
#left
{
width: 250px;
float: left;
}
#left p
{
color: Blue;
}
#left .information p
{
font: normal .83em sans-serif;
color: #000000;
}
#right
{
width: 250px;
float: right;
}
#right ul
{
font: normal .83em sans-serif;
list-style: none;
}
Will show the this:
alt text http://img188.imageshack.us/img188/1576/croppercapture5e.jpg
As you can see, there is no font face for the page itself. But as you dive deeper in the levels of the style cascade you will find that paragaphs have style defined and with the .information class you have a color blue defined on a paragraph. By thinking of what styles are needed as you dive deeper into your HTML you will see that you actually end up with less HTML and better organized style sheets.
Good luck and hope this helps.

Answer 4

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 5

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