Organizing your CSS

22 August 2011

There is no such thing as a golden rule for organizing ones CSS file(s). In all the years of working as a frontend developer, I developed a organizing system that works for me. Maybe it works for you too?

Some developers tend to devide every "part" of a website in different files. A file for typography, a file for containers and other elements, a file for colors, etc. Some even go further and rip the stylesheets even further apart. No problem if you've got a good coding program that searches entire folders for specific keywords. But what if somebody needs to find something and hasn't got such fancy software? The names of the files may be self-explanatory but it still can be hard to find some declarations. The "searchbar" class can be in containers.css, in header.css or even in forms.css...

Therefore I apply a set of rules:

Put everything in one file, except for large portions of the site that need a lot of css code (like a file browser, complex styling of a gallery, etc), modular elements (such as a plugin file manager, e-mail modules, etc) and when you create a site that uses themes.

So my sites always have at least 2 files in the CSS directory. One reset.css file and a main.css file. In this example there are 2 extra CSS files for forms and tables. The forms and tables used in this project are so complex it was beter to seperate them from the main file so that one didn't grow to big. Most projects get an extra print.css file somewhere near completion.



The most important part of organizing the CSS files is in the main CSS file. There I use comment lines to create "sections" and group certain declarations. The order of these sections is important too. I try to order them in a way that they reflect the document order (head > body > footer) and in order of "importance" (body > general styles > content > code formatting).

The sections are generally in this order (for a normal, plain website):

1. General styles (body, headers, cleaner, ad containers)
2. Layout containers (head, content, left, right, footer)
3. Content styles (paragraphs, images, links)
4. Modules (news, forum, comments, etc
5. Modules
6. Modules
7. Modules
8. Media Queries (divergent styling form mobile devices, tablets)



And at last there is the everlasting discussion on single- and multiline coding. Also there is nog golden rule, and none is "the best". Singleline is faster, but more difficult to read. Multiline is slower, but reads easier.

I always use a mix of both. I always write multiline, except for "one-parameter-declarations". This is a good example of using both markups:



At first there is the common styling for .digit_green, .digit_red, .digit_orange and .digit_blue and the next few lines define the background images (icons) that are different for each style.
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

1 comment

  1. Gravatar

    Millie

    03 September 2011

    I was loonkig everywhere and this popped up like nothing!