Tips For Organizing Your CSS Files

One of the most important tips for working efficiently is to always be organized. Make sure that everything is easy to get to, and make sure that it's easy for others to quickly understand how everything's organized.

This applies to source code files, too. Today, I will focus on CSS files. You may be the only one editing your CSS, but you should still write it like if it was for someone else. This can be helpful because you may have to go back and edit your code a year later, and you may have forgotten how you've organized yourself. This applies even more to programming languages, but also quite a bit to CSS.

Keep a development version and a public version

I've mentioned in a previous post "5 Easy Ways to Speed Up your Website" that you should compress your CSS by putting it all into one file, and removing unnecessary whitespace and comments, to reduce the filesize. I use the CSS Drive Compressor to do this.

By having separate development and public versions, you will be able to easily make changes to your organized development version, and upload the public version to your server for faster loading times.

Most of the following tips apply mainly to the development version of your CSS.

Separate your stylesheets into different files

I usually have multiple CSS files, all joined together in one main stylesheet. Use @import to connect stylesheets together. Here is the method that I use.

  • style.css — The main stylesheet containing the general layout, and usually including other stylesheets.
  • reset.css — A reset stylesheet, which comes before anything else, to set all browser defaults to some default values. I use the Eric Meyer Reset.

Any other files are for page-specific stylesheets.

To import a file called 'reset.css':

@import url("reset.css");

Organizing your selectors

It is very useful to have different sections in your stylesheet, each with a little header. I use multiple levels of headings, to organize my file in more of a "nested" way, even though CSS doesn't really support actual nesting. Here is the order of headings that I like to use:

  1. /*=== Eric Meyer Reset ===*/
  2. /*=== General Styles ===*/
  3. /*== Text Styles ==*/
  4. /*=== Layout ===*/
  5. /*== Header ==*/
  6. /*== Content ==*/
  7. /*== Sidebar ==*/
  8. /*== Footer ==*/
  9. /*=== Other Styles ===*/
  10. /*== Comments Form ==*/
  11. /*=== Page-Specific Styles ===*/

Use shorthand CSS

Using shorthand CSS can speed things up while writing your code, and can help make your cleaner and easier to understand. Instead of this long snippet of CSS

 .container {
    background-color: #000;
    background-image: url(background.png);
    background-repeat: repeat-x;
    background-position: top left;
 
    margin-top: 2px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 0;
}

You can use this shorter, easier to understand version:

 .container {
    background: #000 url(background.png) repeat-x top left;
    margin: 2px 5px 10px 0;
}

When using shorthand values for properties that can have top, right, bottom and left, the values must be in that order. If there are only two values, the first value is for top and bottom, and the second value is for left and right.

Organizing properties

With heavily styled selectors, you can get extremely long lists of properties. Of course, it can get confusing to find the right one to edit. I organize my properties into categories, putting related properties together.

 .container {
    margin: 0;
    padding: 0;
 
    width: 100px;
    height: 100px;
 
    border: 1px solid #000;
 
    font-family: sans-serif;
    font-size: 14pt;
    color: #000;
}

Do you have your own way of organizing your CSS? If so, be sure to leave a comment to let me know.

Stay Updated

Did you enjoy this post? Don't miss a single post by getting free updates!

7 Comments

  1. October 16, 2009

    Hi Eric.

    It's Andre from Brazil. Those are nice tips, but do you use any kind of tool to join and compress the CSS files?

    Thanks!

  2. October 16, 2009

    @André: I forgot to mention, I use the CSS Drive Compressor to compress my CSS. I just manually go and put my files together before compressing it.

    Thanks for reminding me

  3. October 24, 2009

    Hmm, I think you've got something wrong with the shorthands.

    You say: "If there are only two values, it is assumed to be top and bottom."

    This is actually assumed to be top/bottom and left/right.
    margin: 5px
    -> T/R/B/L: 5px

    margin: 5px 10px
    -> T/B: 5px - R/L: 10px;

    margin: 5px 10px 15px
    -> T: 5px - R/L: 10px - B: 15px

    That's how shorthand is used.
    Nice article :)

    Pieter.

  4. October 24, 2009

    @Pieter: I must have missed something when checking the post. Thanks for pointing that out!

  5. November 12, 2009

    Thank you for this list!

  6. April 5, 2010

    In the case of WordPress, I have this method of organization:

    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 was my attempt at being a hybrid between pure style organization by html structure, and structuring it around design aspects. 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, but it is easy to remove if that is the case.

    Most widgets and plugins that have styling rules use a css file within the plugin/widget folder so you almost never need to add anything more. 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.

  7. November 25, 2010

    Really good and informative information! I like the way you have described about organizing css file. It is a most important part of web and so every one should take care of this portion.