CODEWITHSUNDEEP
css
Dorjan
Dorjan

Reputation: 2037

CSS organisation with ids and classes

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 :)

Upvotes: 0

Views: 312

Answers (5)

Miriam Suzanne
Miriam Suzanne

Reputation: 14010

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

Upvotes: 4

Chris
Chris

Reputation: 6325

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.

Upvotes: 2

riotera
riotera

Reputation: 1613

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.

Upvotes: 2

zakster82
zakster82

Reputation: 244

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

Upvotes: 0

Joel Coehoorn
Joel Coehoorn

Reputation: 416149

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.

Upvotes: 1

Related Questions