FWebDe

Tips For Organizing Your CSS Files

October 15, 2009, in CSS, by Eric Bannatyne.

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.