At the RefreshDelVal.org Web Standards Group February Meetup yesterday, Sean brought up a question that seems to get asked a lot. How do you best organize your css files?

This is a question that comes up a lot on the very active CSS-Discuss mailgroup. And there seem to be as many solutions as there are responses to the question whenever it gets asked.

I tend to use one file for all major styles, both structural and appearance. Then I put the IE *cough* styles *cough* HACKS in a separate stylesheet called by a conditional comment, with IE6 hacks hidden from IE7 by the * html hack. My main stylesheet has some basic tags first, then all structural elements in source order, then styling of the individual elements contained within the structural elements, and loosely grouped in source order, though in three column layouts with nav on both sides this sometimes goes out the window since I’ll do grouping of like elements in shorthand, followed by individual breakouts. The last part of the stylesheet is devoted to the style elements specific to the program I’m skinning, which allows me to reuse the stylesheet above that part for another application when I’m skinning two programs for the same site.

Now, that’s what makes sense for me.

But I can understand Sean’s frustration since he skins Joomla as the major part of his business, and Joomla stylesheets usually go over a thousand lines, whereas my average stylesheet usually runs between 300 and 400 lines. When I do a Joomla Template I end up with monster stylesheets too, since it seems every single element needs its own styling, and because of the vagaries of the program there’s a LOT of specificity needed. I also get frustrated with Joom styling since it’s counterintuitive for me to use more than one stylesheet, which would almost make sense with Joom, only I’d go nuts trying to remember where I put stuff if I used two or three.

The original Ruthsarian Layouts were broken out into multiple stylesheets, but even Mr. Ruthsarian is now offering a simplified version of these layouts for those of us who are used to working with one stylesheet, and his comments indicate it was in response to user comments. I suspect Mr. Ruthsarian found it as counterintuitive to work with only one stylesheet as I do working with multiples.

For those of you who wish to see how others do it, take a look at these css discussions. And looking at the returns on that page you’ll see just how many answers there are.

Technorati Tags: CSS, Stylesheet organization, Ruthsarian Layouts, CSS-Discuss

This entry was posted on Sunday, February 25th, 2007 at 9:59 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.