CSS file structure survey

[butlins]

I was wondering if anyone would be willing to share their best practice in how they structure their CSS files. I've attached a set of files I use when I'm starting a new site, so I don't get halfway through and discover I've forgot to put an include for Google Analytics.

Basically with my CSS files, I start with by importing a reset.css file which removes default HTML styling, so I'm starting with a clean slate. I've then got three files named after the media they're aimed at: screen.css, handheld.css and print.css. Finally I've got a set of files targeted at versions of IE with conditional comments (ie.css, ie7.css, ie6.css, ie55.css) and a CSS file with the rules surrounded by Tantek Celik's IE Mac band pass filter (iemac.css - which I don't really ever use so will probably drop soon).

The screen.css file starts with what I think of as 'Universal' HTML - elements that aren't associated with a class or ID. Then I've got my 'Universal' classes - for class rules that might pop up anywhere on a page. Next I've for class-based divs and any descendant selectors - div.infobox and div.infobox p, div.infobox h3, for example.

Finally I've got IDs and their descendant selectors, usually in the order that the IDs are used on the page.

It works for most situations, but locating and bug-fixing large files can get tiresome, so I'm wondering if what I'm doing is the most efficient way of structuring my rules, and whether other people have their own way of approaching this that I haven't thought of.

I know that some separate out the page layout from styling - I've not tried that as I'm not sure that shuttling between two files would make things easier, but I'm open to suggestions.

[WyrmFyre]

I know that some separate out the page layout from styling - I've not tried that as I'm not sure that shuttling between two files would make things easier, but I'm open to suggestions.

Imagine having 20+ files and all of a sudden your client wants Times new roman as the default font not Arial. With the CSS in the HTML file, you have 20+ files to change, with the CSS in an external sheet, its only one. Thats why I always separate.

[BoldUlysses]

I think you have some good principles in place as far as organizing your stylesheets.

My stylesheets tend to follow the structure of the page after I get past the global stuff, especially when it comes to navigation menus.

Just like any code, I try to organize the stylesheet with dividers and notes:

/* --- Globals --- */

...

/* --- Nav Menu --- */

...

/* --- Large Photos --- */

...

It's also been helpful for me to "declare" my colors at the beginning of the stylesheet:

/* --- Colors used ---

#130e02 Brown
#c3c1b1 Off-White
#71B0BD Blue
#6f6f67 Border Gray
#f30 Orange

--- */

The hex codes can be hard to keep track of.

The only thing I would add is about pseudo-classes: These follow the class or id to which they refer, except in the cases where they provide some functionality to the page beyond just changing the color/style of text or borders. In other words, if I've got a dropdown CSS navigation menu, I'll put the pseudo-classes that provide the menu's functionality at the end of the block of CSS that defines the menu. Same goes for photo captions or text with a "remotely-controlled" display attribute.

[butlins]

Thanks for that - the idea for the colours declaration is a neat one. Beats my habit of carefully writing them on a Post-It before forgetting where I put it.

I'd not thought about the pseudo-classes before either so, thanks for that tip.

I'm assuming from the general silence that everyone else either doesn't want to share their best practice, declares their rules randomly through their CSS file and enjoys hunting them down when bug fixing, or thinks the way I structure my CSS is nigh-on perfect and needs no further comment ;)

[bazz]

I asked this a couple of years ago. I wondered if the styles should be listed alphabetically (clearly not :) ) or some other way. I don't recall the specific answer but, now, I do the globals at the top, and the css flows (with separator comments) similarly to the page flow.

I had found sometimes that two sections of css could conflict if they were in the wrong order which is why I put them in flow order.

Now when I need to find buggy CSS (NEVER :D ), I just look for the tag that matches the failing HTML element.

@butlins, your principles so far seem to be pretty good though I (persdonally) would drop the necesssity to cater for anything below ie6.

@msuffern, I like tip tip about declaring colours at the top.

cureently, I am thinking along the lines of trying out a css file for positioning and another for colours and font styles. I am hoping to make management of colours and changes of them easier.

bazz

[VIPStephan]

I usually structure the CSS files according to the order the elements appear in the source code while I write more general rules at the top and more specific ones further down. For example:

Rules that apply to all elements in general, on all pages
Rules that apply to header, content, footer sections and certain elements that are present on all pages
Rules for specific elements on specific pages according to the occurrence of certain elements on a page; again, more general rules above more specific rules


Sometimes I’ll end up specifying the same styles twice for different elements but that’s still easier to overlook.

I always hate(d) the default stylesheet in Wordpress which ist structured like “typography and colors”, “structure”, “headers”, “images”, “lists”, “form elements”. That’s very subjective and for me headers, lists, etc. do have a structure as well so why should there be separate rules? You just have to search (at least) twice to style one element. Totally confusing.