How To Organize CSS Files?

You might have noticed the title of this post is phrased as a question. That’s because this post isn’t meant as a me telling you how to organize your css, but rather it’s intended as an open discussion. I’ll share some thoughts and I hope those of you who are css coders will chime in with some thoughts of your own.

Before I begin let me say this post isn’t meant to be an all encompassing how to organize your css either. I’m mostly thinking and asking about top level organization.

Should you organize styles around your html structure or should you organize styles around different aspects of design like layout and color?

In the future I’ll put together a more thorough and detailed post on organizing your css if you’d like.

Organizing CSS Around Your HTML Structure

For years I’ve been organizing my css files mostly the same way. The files will follow a top down approach matching how the design is coded. I’ll usually start with basic html elements followed by common classes and then add sections that mimic the html structure. It generally looks something like this:

{code type=css}
body {font:16px helvetica, verdana, arial, sans-serif}
h1 {font-size:24px; margin:0 0 20px 0; color:#00f}
h2 {font-size:24px; margin:20px 0 0 0; color:#0f0}

alignleft {float: left; margin:0 10px 10px 0}
alignright {float: right; margin:0 0 10px 10px}
.center {text-align: center;}

#wrapper {width:960px; margin:0 auto}
#header {background:#333; color:#eee; border-bottom:1px solid #000}

#nav {margin:0; background:#777;}
#nav li {float:left; padding:3px 0;}
#nav li a {padding:5px 10px; text-decoration:none; color:#fff; font-size:12px;}

#sidebar {float:left; width:320px; font-size:12px; line-height:18px; margin:20px 0}
#sidebar h2 {font-size:18px; border-bottom:1px solid #999}

#content {float:left; width:600px; margin:0; padding-right:20px; font-size:14px; line-height:21px}
#content ul {list-style:disc}

#footer {clear:both}
#footer p {text-align:center}
{/code}

Organizing CSS Around Aspects Of Design

Lately while working on a WordPress theme framework I’ve been thinking if another approach might be better. Instead of following the html structure I’ve wondered if it would be better to have sections based on different aspects of design.

For example a section of css for layout, another section for typography, and another for color. If you rewrote the css above this way you might end up with something like this:

{code type=css}
/* ——————————
layout
—————————– */
#wrapper {width:960px; margin:0 auto}

#sidebar {float:left; width:320px; margin:20px 0}

#content {float:left; width:600px; margin:0; padding-right:20px; }

#footer {clear:both}
#footer p {text-align:center}

/* —————————–
Typography
—————————– */
body {font:16px helvetica, verdana, arial, sans-serif}

h1 {font-size:24px; margin:0 0 20px 0;}
h2 {font-size:24px; margin:20px 0 0 0; }

#nav li a {font-size:12px;}

#sidebar {font-size:12px; line-height:18px;}
#sidebar h2 {font-size:18px; }

#content {ffont-size:14px; line-height:21px}

/* ——————————
Color
—————————– */
h1 { color:#00f;}
h2 {color:#0f0}

#header {background:#333; color:#eee;}

#nav { background:#777;}
#nav li a {color:#fff; }

/* ——————————
Common
—————————– */
alignleft {float: left; margin:0 10px 10px 0}
alignright {float: right; margin:0 0 10px 10px}
.center {text-align: center;}

#header {border-bottom:1px solid #000}

#nav {margin:0; }
#nav li {float:left; padding:3px 0;}
#nav li a {padding:5px 10px; text-decoration:none; color:#fff; font-size:12px;}

#sidebar h2 {border-bottom:1px solid #999}

#content ul {list-style:disc}
{/code}

Advantages and Disadvantages of Both Approaches

I can see advantages to both approaches. The top down approach makes it easier to work on a specific section of the site. Say you want to make changes only to your site’s navigation. In that case it would be nice to have all the navigation css in one place.

On the other hand say you’d like to keep everything as is, but would like to change the color scheme of your site. In that case it would likely be easier to have all the css controlling the color in one place.

The disadvantage in either case is whichever you choose you lose out on the other.

If you take the top down approach and want to change your typography you have to constantly scroll throughout your css to find different typographic styles. Changing layouts this way can be a bit of a nightmare as some of you probably know.

If you organize around aspects of your design then you have to look in several places to work on just your navigation or your sidebar.

One other problem is deciding what goes where if you use shortcuts. Take something like the border property. Using shortcuts you might have something like:

{code type=css}
border {1px solid #333}
{/code}

If you only want to pull out the color you lose the shortcut. I think organizing around design aspects would end up leading to more overall code, though probably not too much.

What’s Your Preference?

I’m inclined to think organizing into layout, color, typography, etc will end up being more manageable and ultimately easier to work with and I’m leaning toward changing my css to follow that style.

What do you think? Do you use one or the other and which do you prefer? Do you think one approach would be more maintainable than the other or do you think this comes down to stylistic preference?

« Prev PostNext Post »

Download a free sample from my book, Design Fundamentals.