CSS Organization

Last month, a discussion popped up on the CSS list about organization of CSS files. This is a discussion that comes up from time to time on that list and in smaller development discussions.

I don't think that my way is necessarily better than any other, but I thought I would share it. If for no other reason than to open up the discussion.

One method that I have seen is to divide up the files into "modules": forms.css, layout.css, tools.css, typo.css. This seems nice, but leads to a few problems.

  • Some elements can be defined in multiple files, causing confusion (form elements that need typographical styling or elements that need both typographical and layout styling).
  • Some definitions are not clearly on one of the modules and this leads to the need to search between multiple files.
  • Many definitions will be loaded for every page request that aren't needed.

I want to organize my files so that everything is easy to find, but I don't load any code into the browser that isn't likely to be needed (meaning that it *may* be needed for that request).

As such, I organize my CSS files along three dimensions: media type, folders/files, and browsers. So, I have an all.css file that holds the defintions that will be needed for all media types and all files. Then I have a separate file for each media type that I need to define. So, I would have a print.css to define my print styles.

If I have a page that needs a lot of CSS definitions (say, about.cfm), then I would create a .css file for that page (about.css, in this example). If I happen to need some print style just for about.cfm, I would name the CSS file about-print.css.

Additionally, I will create files for any browser for which I need to define hacks (I am generally able to avoid this, but sometimes it can't be helped). So, I might have an ie6.css file for some sites.

So, my CSS files for a site might include the following:

  • all.css (for all pages and media types)
  • print.css (for printing for all pages)
  • about.css (for the about.cfm page in the same folder)
  • ie6.css (for ie6 hacks for all pages) 

 Does anyone else have a favorite way to organize their CSS?

UPDATE

While I am on the topic of CSS, I just ran across soemg ood CSS advise:

CSS Techniques I use all the time  

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
CSS "Cascading Style Sheets" Lessons
css list style Properties and examples -- http://css-lessons.ucoz.com/list-css-examples.htm
# Posted By examples | 8/10/08 7:20 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.8.001.