CSS organisation / structure

Question

Hi there,

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

the divisions you have specified look good - I'd suggest keeping each section in its own file reset.css base.css forms.css - you can easily combine the files when deploying using http://developer.yahoo.com/yui/compressor/. Helps keep the css a bit smaller when doing development.

Answer 2

I use SASS and organize all that using files (one file then could be included in another). It makes sense, because I always know where to look for a specific thing and people don't get confused browsing through a long single css file. Thus it disciplines other people to leave no "broken windows".

Answer 3

I faced the same problem. I search the web without finding a definitive answer.

I ended up laying out my common CSS file similar to your css layout. I then put page specific page css into their own files. Why clutter up the common.css, with page specific css. Many people articles/posts were concerned that too many files would slow the site because of open browser connections. While I recognize this could be an issue, I’ll address it when it becomes one. As pointed out in one of the other answers I can always merge and compress the css at deployment.

Answer 4

My current project is a large SAAS application that has a ton of css to deal with. I prefer to keep mine in one file, not only for speed of load, but also to minimize the amount of times I have to jump around when I'm editing...plus, no need to deal with YUI's quirks. My previous employer standardized on YUI and we used it extensively...it works, but it can get really clunky in a hurry.

Structure-wise, I break my code out just a bit more. I start with main declarations such as */body/html/H1/P etc. Then, I do a section for head specific content. Follow that with a general body section, with sub-sections for each page that might have specific content. I close with a footer specific section. I find that if I structure it logically as the page is built, at least I have an idea where to look--header at the top, footer at the bottom, etc. And, I can go from code to local test to deploy in two keystrokes.

Beware of minification on CSS. Sure, it works. But in the case of my last contract, we were working on sites that changed almost daily in some cases and a business analysis revealed that we'd burn more company resources minifying and un-minifying than would benefit us from just building simple, clean css. As long as it's caching and you're not loading multiples of CSS files, you're good. In that job's situation, 1 particular page was getting 1 million uniques a day, and the business group was good keeping it uncompressed despite a potential savings of 5gb per day on a 5k improvement from minification. Bandwidth is cheaper than UI engineers, I guess....

Answer 5

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; }