I have mixed feelings about the best way to lay out my CSS. If it's a small site, one file ("style.css") is generally sufficient. But on larger sites, especially sites that support various themes, require multiple CSS files.

I've been thinking of my own way of splitting up the CSS efficiently and laying it out elegantly and in an organized way but was wondering if anyone had thoughts or ideas on the matter.

As far as "style" goes, I've been using this style:



instead of this format:



The tabs seem to make it look better and more organized to me.

But what works best for you?

• How do you prefer to "split up" your CSS into multiple files?
• How do you format the CSS in the files?
• Do you put any CSS in a sort of order or organize it in any particular way?
  

I'm interested in your thoughts on this.

Hey Matt,

1. It seems to me that usually one CSS file is sufficient for most sites. However, one site I am working on has a different set up that I think is pretty interesting. They use two CSS files called style_html.css and style_css.css. The first contains the basics (a, ul, li, img, body, etc.) and the second holds the rest of the styles with classes, id's, and such.

2. I use the second one you showed above. I'm not too picky about that

3. I think the most common way is to organize them by the page layout (ie create sections for header, body, sidebar, footer, etc.). Otherwise you could just lay them out alphabetically. That seems to get the job done.

I've never used more than one css file for a site before. However, only recently have I started created more "advanced" sites. I'm sure multiple css files will be coming soon, especially once I start playing with multiple themes.

As far as formatting, I never line them up with tabs. I always just use a space (for instance, background-color: #FFFFFF Depending on what it is, I sometimes keep everything in a single line. It isn't something I've done intentionally, just something I've noticed I do.

Generally things like body, img, etc, I keep more like this:
But when I'm defining an id or a class, or anything else specific, I generally keep it in one line:

It's not really anything I do consciously, but even with larger style sheets, I never have a problem finding what I'm looking for so I don't imagine I'll try to change how I do things.

As far as organization goes, I generally put all the body, img, etc near the top and all the more specific stuff at the bottom. I don't really keep them in alphabetical order, but if it's close together on the page, I keep them close in the css. So all my footer css will be together, etc.

I like how yours looks but I have found that I really just can't be bothered to fix the look of it every time I want to change something. It's really not worth the time considering it's really not difficult to read in the first place.

To add to my previous statement (can't edit), I'd like to say that I generally have a site-wide css file, ie: default.css and then a page specific css file which generally is named whatever-page.css. So I import 2 files. I don't really like the idea of cluttering up one giant file.

(Sorry about the "Edit" setting -- I've expanded the time to 1 week now.)

That's actually a really good idea... but do you find it difficult to sort through various style sheets? Or do you set up perhaps a server-side script that imports the ones you need for you?

(02-20-2009 01:46 PM)Matt Wrote:  (Sorry about the "Edit" setting -- I've expanded the time to 1 week now.)

That's actually a really good idea... but do you find it difficult to sort through various style sheets? Or do you set up perhaps a server-side script that imports the ones you need for you?

I imagine that would be easiest. Make a script that automatically chooses which secondary css file comes in. I like the idea, but I've never really needed it. I think it's always good to keep things in mind for the future, though.

Can you give me a quick example of when you'd use something like that?

You'd want to do that when, most likely, the site's appearance depended on a user's saved preferences.