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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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}

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/* ------------------------------
         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}

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:

1
border {1px solid #333}

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?

Download a free sample from my book, Design Fundamentals.

9 comments

  1. I like organizing around design. My files are generally have comment blocks which indicate whats in that area. At the top I have a big block that “indexes” the css blocks.

    If I need to change a font size, color, etc, I can get right to it without having to think, how is it structured on the page.

    The webdeveloper plugin for Firefox, makes this even easier as it tells you the line that CSS element is on.

    • I think that’s the better approach and it’s about time I changed the way I organize my css. I’m a creature of habit and haven’t updated it awhile.

      One thing I’m still trying to work out is where to place certain css. Like the border property I mentioned. Should I pull out the color from the shortcut or just leave the entire border css together in one place. I’ll go with my gut and adjust over time.

      The webdeveloper toolbar is the one that gets the most use for me on Firefox. Lately I’ve taken to using Safari more and I’m having to use a different set of plugins. Sadly some I really like on FF have no Safari equivalent at the moment.

      • There have been times, I have even considered separating the CSS into different files.

        I havent convinced myself this is a good practice, so I only think about it, when I am doing major changes to a site.

  2. In the start, I never questioned organizing my CSS based on design. I would always start my style.css like this:

    /*
    Theme Name:
    Theme URI:
    Description:
    Version:
    Author:
    Author URI:
    Tags:
    */
    /* Table of Contents:
    1. Base Font, Text & Colors
    2. Layout
    3. Post/Page Content
    4. Comment/Pingback Properties
    5. Search Bar/Box Properties (optional)–NONE
    6. WordPress Calendar
    7. WP-Specific Classes
    */

    It seems like its a good working model as it is kind of a hybrid between the aspects you mention. The way I see it, you will always have div IDs for each area of the site. The calendar function that wordpress provides is optional, so you dont always need 6 or 7.

    Most widgets and plugins that have styling rules use a css file within the plugin/widget folder so you almost never need to add a #8. Either way, this organization has helped me in knowing all the kinds of styling I might need for wordpress but they are organized in such a way that I can abstain from including areas I dont need in a specific theme such as the wordpress calendar styling.

    • Seems like a good way to organize. The part that always gets me is something like font-family for comments. Say you decide the font for comments will be different than the rest of the page. Would you want to include the new font-family in typographic styles or in the specific section on comments?

      I can see advantages to including it in either place.

      I guess there’s not going to be a perfect system of organization and the best thing to do is to be consistent.

      • Steven, thanks for the info. I’m trying out SASS for the first time and while it’s amazing for its DRY focus, I am still finding it difficult in where to start!

        I think the design-approach might suit my needs. I’ll give that a try. -Lawrence

        • Glad to help. I haven’t tried SASS myself yet. I like the ideas of what SASS and LESS are doing, but there’s still something that keeps me from using them.

          I’m still working out what the best way is to organize css files. Jonathon Snook recently released SMASS, which are his ideas on how to organize css. He has an interesting approach that you may find useful.

Leave a Reply

Your email address will not be published.

css.php