Beautiful CSS: Organizing Your Stylesheets

January 7th, 2009 in Design Tips & Tutorials

by: Matthew Griffin

When I first took the plunge into CSS several years ago, one of my biggest frustrations was stylesheet organization. I scoured source code from popular sites trying to figure how they accomplished various layout effects. But tracking back and forth from stylesheets to HTML proved to be a difficult task. Unfortunately , that separation of style and content that makes CSS so awesome can also make it difficult to understand. Adding to that difficulty is the fact that each designer may have a different way of organizing stylesheets. If you inherit someone else's site, this can cause some problems. In a perfect world everyone's CSS would be well-organized, easy to scale, and easy to understand. We may not be able to attain such CSS Nirvana but we can at least make it easier on ourselves and those we work with by following this set of guidelines.

Basic Organization

A stylesheet should be separated into four main sections: (1) Universal Styles (body, p, a, etc.),  (2) library styles, (3) template layout styles, and (4) individual page styles. In order to make it easier to locate the four sections discussed here make sure that you put a descriptive comment above each one along plenty of space above and below. Even with well organized CSS, it can be easy to get lost. The bulk of your CSS should go in the template layout section and should be formatted to match the hierarchy and indentation of the corresponding HTML markup. We'll get to that in a moment, but for now let's start with universal styles.

Universal Styles

Starting with universal styles is pretty typical. You want to set the stage by specifying the background, font size, link color, etc. for the website. The universal style section usually only takes up a small portion of the overall CSS code. You should only include HTML tag selectors in this section of your CSS file. This part of the stylesheet is meant to describe what the norm will be for commonly used HTML tags. Body, a, p, and blockquote are examples of the selectors that should be cited here.

Library Styles

The next section in your stylesheet should be library styles. Library styles use classes to style elements that are used over and over again in your website. For example, I usually have a library style called .photo_right. I use this library selector to float images to the right in my website. Here's what it looks like:

<img src="myimage.jpg" class="photo_right" />

.photo_right{ float: right; margin-left: 10px; }

You should only use library selectors on element that appear in various places on the site but need a consistent look regardless of their location. You wouldn't use a library selector, for example, on your main navigation bar.

Template Layouts

As I mentioned above, the template layout section is where the bulk of your CSS will go. I find it easiest to format and space this section of my CSS to match the order and indentation of my HTML. For example, if you have a page with HTML that looks like this:

<div id="container">
    <div id="header">
        <div id="navigation"></div>

Then your CSS in the template layout section of your stylesheet should look like this:

#container { }
    #container #header { }
        #container #header #navigation { }

Formatting CSS in this way makes it easy to find which selector goes with which HTML tag.

It's important to distinguish in your HTML between unique template elements and other elements that change from page to page. Template elements are tags that wrap the content of the site and appear on every page (with few exception). For these template elements, it's best to use unique IDs for styling rather than classes. For example, if I have a two column page layout with a header on top, my HTML and CSS would look something like this:

<!-- HTML -->
<div id="container">
    <h1 id="header">Here Is My Header</h1>
    <div id="column_one">Here is column one.</div>
    <div id="column_two">Here is column two.</div>

#container {
    width: 780px;
        width: 100%;
        width: 600px;
        float: left;
        width: 180px;
        float: right;

Using IDs for template elements makes it easy to identify the important selectors in your CSS and HTML. Major layout changes become easier because you know exactly what to look for.

Classes should be used for elements that aren't unique. For example, if you have an unordered list (<ul>) element that is a list of links, you would put that into a class. Unless the list of links is your main unique navigation bar, chances are you will have lists of links all over your site on various pages and in various sections of the layout. Let's look at an example of one such link list wrapped in a template layout column.

<div id="column_one">
    <p>This is the first column</p>
    <ul class="link_list">
        <li>link one</li>
        <li>link two</li>

    width: 180px;
    #column_one ul.link_list li { background-color: #ccc; }

In this example, only link_lists within the #column_one <div> will have the background color #ccc. These types of classes should appear in the main layout section of your stylesheet. Any class that is dependent on certain ID selector should be grouped below that ID selector and indented exactly the way your HTML is indented.

Individual Page Styles

The last section in your stylesheet should be a section for classes that only pertain to certain pages or certain types of pages. Grouping these selectors together will make it easy to navigate the quirks of the individual pages on your site. Many times you will run into situations where there is a particular style you need to use on a particular page but the style has no relevance to the rest of the pages on the site. That's when you move the selector into the individual page section of your stylesheet.

For a complete example with all the sections described above you can take a look at this site I recently did a CSS overhaul for. No, I didn't design the graphics so don't give me a hard time about that. The HTML and CSS are what you should look at.



Posted By: John V. on 01/07/09

This is a very nice methodology to keep stylesheets organised. Navigating code like this is indeed much easier - it's very clear what belongs to what. Though - looking through stylesheets to try and find a particular style is something I rarely do any more. If I ever need to find the style for something, it's a quick trip to Firebug to see which line of the stylesheet I'm going to have to look at.

Posted By: Matthew Griffin on 01/07/09

Good point, John. Firebug makes life that much easier.

Posted By: Brooke on 01/08/09

Thanks for this. I'm in the process of building a new site and learning CSS as I go. It gets messy at times, and I'll definitely be referring back to this post.

Posted By: Matthew Grffin on 01/08/09

Great, Brooke. I hope it helps you avoid some of the frustration I dealt with.

Posted By: Khayyam Wakil on 01/08/09

Just when I needed a good reference for clean CSS organization... you come to the rescue. Definitely keeping this one for referencing! Best.

Posted By: Alif Rachmawadi on 01/08/09

Organizing stylesheets is simple task, but many people think that organizing is less important than design itself. This post is a good reference for many people to help organizing their stylesheets. Good design is not all about design itself, it is also about how to managing markup, entities, and markup. Good managements will prevents frustations in the future. Thanks for your post.

Posted By: joyoge designers' bookmark on 01/08/09

nice point thanks..

Posted By: tiso on 01/08/09

I use this method for years, it is very simple to learn and use. And it respects the "from generic to specific" principle of cascade

Posted By: Amber Weinberg on 01/09/09

I agree CSS organization is so important when I'm coding but I noticed it's not something done by many coders. I can't tell you how much time I've wasted because I had to search endlessy through unorganized and filthy CSS and HTML code.

Posted By: Gopal on 01/09/09

Nice tips.

Posted By: Juan Gotti on 01/10/09

It's always a great idea to have your own system of organization when it comes to CSS. IMO I find this way a not that practical, not for separating things into sections, but the indenting of the selectors. Even without firebug, you only need to know the "find" shortcut to look for any specific selector.

Posted By: Matthew Griffin on 01/10/09

Thanks for the comments, everyone. Juan, I understand what you're saying but practically speaking it's much easier to be able to see the CSS and the HTML in a parallel structure. The "find" method works fine for hunting down one selector but when you have to go back and do extensive work in your CSS file, you'll wish you'd organized it correctly.

Posted By: Ofer on 01/13/09

Hi, Thanks for that nice post. We have to remember css goes better with <div>, lets quit the table overusing

Posted By: CraZy675 on 02/06/09

Thanks for the awesome article, I referred all my junior developers to this post. I'd like to add to this strategy if I may. I always include a reset css file before the above. Also sometimes my styles require php so I create a process.php file (which changes the header to css). I used to embed php in every style sheet but found others working on the site would complain their dreamweaver or (insert other crappy editors here) wouldn't display the css formating correctly. Actually before I read this article I would keep my universal and library in the same file, and I called it base (loosely based on yahoo's css base). With your above strategy it is easier to create base css sheets you can use over again for rapid development. Thanks again.

Posted By: CraZy675 on 02/06/09

Also you might want to mention that the order of the style sheets is important as page styles should overwrite template styles, template overwrite global etc. You and I are familiar with cascading but some juniors are not.

Posted By: Matthew Grffin on 02/06/09

Thanks for the comments, CraZy675. You make some great points.

Posted By: CraZy675 on 02/10/09

Also using multiple css files reduces download time so you should be using some sort of compressor like minify: (you could write a whole separate article on this topic though)

Posted By: Seo Yarismasi on 04/27/09

Thanks for that nice post.

Posted By: Propecia Online on 06/01/09

interesting post.. thanks!!

Posted By: Nick Yeoman on 07/06/09

Hey, since I read this I've done a lot of research on this subject. Let me know what you think. I started off with your concept and build around it eliminating the problems listed in the above coments

Posted By: Trevor Saint on 07/14/09

I love this post. Thanks.

Posted By: effexor en ligne on 07/21/09

Interesting way to look at it. For the most part, I agree with you.

Posted By: Russell on 08/28/09

I'm a coder; I typically I organize the stylesheets into separate .css files. It's easiest to start by working on a stylesheet for an individual page. When working on a second page, any styles that apply to both pages get 'refactored' into another, separate .css file (which would be a library or template stylesheet). My group at work uses a component-based web framework, so individual components (a date-picker widget, or the main content section of a templated page, for example) can also have their own stylesheet files. The widget's stylesheets get incorporated automatically when the widget is added to the page.

Posted By: Jasmin Halkic on 09/12/09

Very nice post.

Posted By: Shaunak on 09/12/09

The CSS I write is so messed up that I myself find it hard to follow! Your methodology is very interesting. It works well while incorporating ready made layouts like Bluprint etc.

Posted By: Mike Grace on 09/12/09

Rockin!!!! I am going to start organizing my CSS like this from now on. ; )

Posted By: on 09/15/09

Nice. But I find such selectors #container #header #navigation { } rather longer than needed and inefficient. Check this tool

Posted By: John Barnes on 11/18/09

Hi there, liking the post, and have implemented it on my recent projects. Was just wondering....if I had divs that only appear on individual pages...but have specified IDs....would the css for them be placed in the individual page styles section...or is that only reserved for classes..thanks

Posted By: Matthew Griffin on 11/18/09

If you have a unique id for a div that only appears on one page, put that in the section for that page. The only exception I make is for page titles where I'm using the image replacement method. In that case, I usually group them all together in the library section.

Posted By: john barnes on 11/18/09

Hi matt.. So if I have a unique id for a div that only appears on one page that should go under the "individual page styles section", not the "template layout" section? Thanks

Posted By: Matthew Griffin on 11/18/09

Yeah, that's right.

Posted By: john barnes on 11/23/09

Thanks for your help

Posted By: webdesign rosenheim on 01/20/10

Nice post thanks! I recently worked my way through website optimizations for optimizing load times. Allover this field css compression can be found. That means for example removing all unnecessary spaces and newlines... Whilst this reduces the size of the files dramatically, the readability is not existent anymore. So what would one do about that? If you want to have fast loading sites but a readable css file too??

Post Your Comment

Comments are closed.