Scarf*oo

Let’s face it, navigating and maintaining large CSS files is no fun. As long as the site is small or if you happen to be in the early stages of development, the CSS file looks manageable, but once you hit the 2k+ line mark, finding what you are looking for can take a while. Not to mention how your team is going to pollute your style.css if the file structure is overly complicated.

With some proper CSS file organization, you can wave these problems goodbye. What I am suggesting here is an organization style that has worked for me and my team so far. Let’s dig into it.

Structure

1. Reset
I could as well link one of the many reset.css style sheets, but to save on server requests, I’ve decided to put the reset styles on the top of my main CSS file.

2. Base
The html, body and defaults for other basic html elements go here. This section is usually pretty minimal, because I like to style elements as they come along in the source. That way I have more control over the styles and less overriding to do later on.

3. Structure
You might opt to let this section go, depending on whether you like to separate the container divs from other styles or not.

4. Header
The definitions for styling the header of your site go here.

5. Content
The definitions for styling the content section of your site go here.

6. Footer
The definitions for styling the footer of your site go here and again you might skip this section if your site has no footer.

7. Navigation
The various menus, breadcrumbs indicator, etc.

8. Modules
I use this section to define the separate modules or blocks used on my site. News, polls, events lists, flickr feeds, quick links, and similar sections are usually defined here.

9. Forms
I like to put all the forms in one place, this proved to be a wise decision over time.

10. Custom Classes
I put here various reusable classes that are frequently shared throughout the site. You might not need this section if your site is a simple one, but when it grows too complex, you might find this section handy.

11. Everything Else
All that you can’t fit anywhere above. Usually this section only ends up only having a few classes.

12. Print Styles
If you don’t store your print styles in a separate file, this is the place to define them with a @media print block. You should put this section as the last one, as you potentially want to override any previous CSS declaration.

Sample

Here is some code from a sample style file. I’ve omitted most of the code for simplicity sake, but I’ve left section and sub-section comments in.

/*
 *  Table Of Sections
 *
 *  1. Reset
 *  2. Basic Elements
 *  3. Generic Classes
 *  4. Basic Layout
 *  5. Header
 *  6. Content
 *  7. Sidebar
 *  8. Footer
 *  9. Navigation
 * 10. Forms
 * 11. Modules
 * 12. Print styles
 *
 */

/* Reset  - do NOT modify!
-------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Basic Elements
-------------------------------------*/
html, body { height: 100%; }

body {
	font-family: helvetica, arial, sans-serif;
	font-size: 62.5%; /* 1em = 10px */
	line-height: 1.5em;
	color: #333;
	background: gray;
}

/* Generic Classes
-------------------------------------*/
/* --- Link list --- */
/* --- News list --- */
/* --- Attachments list --- */
/* --- Links --- */
/* --- Messages --- */
/* --- photo frame & content photos --- */
/* --- Other --- */

/* Basic Layout
-------------------------------------*/

/* Header
-------------------------------------*/

/* Content
-------------------------------------*/
/* external link */
/* --- video --- */
/* --- unsorted list --- */
/* --- numbered list --- */
/* --- tables --- */
/* --- Icons in content --- */
/* --- Search results --- */
/* --- Photogallery --- */
/* --- News --- */

/* Sidebar
-------------------------------------*/

/* Footer
-------------------------------------*/

/* Navigation
-------------------------------------*/
/* --- Breadcrumbs --- */
/* --- Sitemap --- */
/* --- Main Menu --- */

/* Forms
-------------------------------------*/

/* Modules
-------------------------------------*/
/* --- News --- */
/* --- FAQ --- */
/* --- Poll --- */
/* --- Quick links --- */

/* Print styles
-------------------------------------*/
@media print {

	/* Your print styles go here */

}

So, here it is – a nice organized layout for your CSS declarations. I hope you find it useful as much as I did and I’d love to hear from you if you have any comments or suggestions to improve this.

This entry was posted on Monday, October 5th, 2009 at 5:09 pm. You can follow any comments through the RSS feed. Both comments and pings are currently closed.