CSS organisation / structure

Question

I've been working on finding the best way to organise CSS code, especially on larger sites. I'm less interested in writing style and more in how people structure and manage their code.

I've been following this structure which I feel works rather well for maintainability but I wanted to get your opinion on this and hear other methods:

/*=======================================
 1. =reset
=======================================*/
/**
 Anything but * reset
**/

/*=======================================
 2. =base
=======================================*/
/**
 Base rules so naked HTML has basic style and displays consistently x-browser
**/

/*=======================================
 3. =base forms
=======================================*/
/**
 Base form framework
**/

/*=======================================
 4. =base site
=======================================*/
/**
 Rules common across the majority of pages
 e.g. header, footer, main columns, navigation, search bar etc.
**/

/*=======================================
 5. =recurring styles
=======================================*/
/**
 Re-useable snippets -- not to include positioning / structure etc.
 e.g. buttons, icons etc.
**/

/*=======================================
 6. =recurring modules
=======================================*/
/**
 Re-usable modules common to multiple pages/views but not majority
 e.g. a product carousel could be on the homepage as well as the product page and maybe even the checkout page etc.
**/

/*=======================================
 7. =homepage
=======================================*/
/**
 contains rules only applicable to homepage
**/

/*=======================================
 8. =about page
=======================================*/
/**
 contains rules only applicable to about page
**/

/*=======================================
 9. =contact page
=======================================*/
/**
 contains rules only applicable to contact page
**/

...and so on

Any thoughts would be much appreciated.

Rich

Answer 1

My basic format is a block comment at the top and diving into major regions with header comments (similar to yours).

/*
 * Title of the site
 * Author
 * Date created
 * Last updated
 * 
 * 1-2 line description of what the style sheet is for. 
 *
 */


/* Reset (probably imported)
-------------------------------------------------------------------------------- */
...


/* A Framework (probably imported)
-------------------------------------------------------------------------------- */
I like YUI Grids


/* Global
-------------------------------------------------------------------------------- */
Styles for basic elements like: body, h1-h6, p, ul, li, ..., and often a wrapper.


/* Header
-------------------------------------------------------------------------------- */
Any styles specifically for the header block (this is usually short)


/* Body
-------------------------------------------------------------------------------- */
Basic layout for the main body block


/* Footer
-------------------------------------------------------------------------------- */
Similar to header


/* Utility Classes
-------------------------------------------------------------------------------- */
Things like 
.align-center { text-align: center; };
.hide { display: none !important; }
...


/* Specific Pages
-------------------------------------------------------------------------------- */
Those are my usual subsections (separated by 2 line breaks).  Beyond that, short 
rules that only apply to a certain page or subset of pages will get a section like 
this.

A few more tips:

Indent descendants of specific subsections.*

div#left-col { ... }

    * html #left-col { ... }

    #left-col p { ... }

    #left-col ul { ... }

        * html #left-col ul { ... }

        #left-col li { ... }

*But keep rules efficient with the number of descendants included in a selector. Typically, I would write:

div#left-col li span { font-weight: bold; }

instead of:

div#left-col ul li a span { font-weight: bold; }

Remember, that this is changing precisely what the rule selects, but as long as it works for your pages and is maintainable, it's OK.

Alphabetize properties.

body {
    color: #ccc;
    font-family: Helvetica, Arial, sans-serif;
    padding: 2em;
    -webkit-something: some value;
}

Collapse short rules to 1 line (if it doesn't hurt maintainability).

div#left { float: left; margin-top: 30px; width: 300px; }