[0p9]

A good example of some super organized CSS is in the HTML5 Boilerplate by Paul Irish. Found here: https://github.com/paulirish/html5-boilerplate/blob/master/c... I sometimes use multiple instances of the same selector, especially if a project starts getting very big. I like to separate each function of the site into it's own block after the footer declarations. It lets me stay organized during development and ensures that I can keep track of what I'm working on while I'm working on it. Here's the order I'm currently using, which was inspired by the above:

    /* HTML STRUCTURE STYLES */
    body { foo: bar; }
    h1 { foo: bar; }
    a { foo: bar; }
    /* Image Replacement & Hacks */
    .ir { foo: bar; }
    /* Container Styles */
    #header { foo: bar; }
    #main { foo: bar; }
    #footer { foo: bar; }
    .column { foo: bar; }
    .sidebar { foo: bar; }
    .img-cotainer { foo: bar; }
    /* Everything inside of #header */
    .navigation { foo: bar; }
    #header li.nav { foo: bar; }
    /* Everything inside of #main */
    .content { foo: bar; }
    /* Everything inside of #footer */
    .social { foo: bar; }
    #footer li.nav { foo: bar; }
    /* Everything in specific view inside of a container from above */
    .profile { foo: bar; }
    .comments { foo: bar; }
    /* Media Queries */
    @media all and (orientation:portrait {
      * { foo: bar; }
    }
    /* Print Styles using Media Query */
    @media print {
      * { foo: bar; }
    }