1 Interesting idea but...

Hi,

At Concordia University in Montreal, we actually used to do this (separate the style sheets as you described). In the end, we found it very cumbersome especially with so many sites to work on at any given time.

For example, when we have to style, say, a div. We’d have to edit color.css to change the color of the div, then open type.css to change the font, etc. Things got worse for us when we had to throw in unique homepage styles. Then say, for some reason we had text in a background graphic (not lately, but we used to), then some workers got confused where to find the style.

What we do (now, until I can figure out a better way), is simply organize the stylesheet into sections with a table of contents at the top, e.g., head, body, sidebar sections. We share a common.css with all the websites (to save bandwidth as it would be stored in the browser’s cache), and each has a custom.css to modify any styles. IE5,6, and 7 stylesheets are added on top of that, then finally, print.css.

Just my two cents of course.

Rommil

posted at 12:25 pm on October 21, 2008 by Rommil Santiago

2 ... I forgot to add...

We also have options on our pages at the university to change the layout (including font-size). It got really cumbersome to separate those into type, color, etc.

posted at 12:28 pm on October 21, 2008 by Rommil Santiago

3 Untitled

I’m not really in favour of adding multiple style sheets for the simple reason that it becomes very difficult to track them down when you are editing the page. I have found that I spend more time trying to work out what styles are doing and where they located.

I agree with Rommil, I prefer to have a table of contents at the top of the page and break up the style sheet into sections.

To date I have not found the perfect solution for laying out my styles but thats a work in progress. It is also only very recently that I have started to add browser specific styles as previously it was all about getting it looking the same in all browsers, after all thats what the client wants.

posted at 12:51 pm on October 21, 2008 by Aaron Witherow

4 Server Requests

I think having 6+ stylesheets is great and all but the biggest downside for it is you have more and more server requests. Why not organize your stylesheet in a logical manner like I’ve done on my own website? – http://www.nealgrosskopf.com/

posted at 12:53 pm on October 21, 2008 by Neal G

5 Multiple stylesheets

As others have mentioned before, separating css files like this is hell. You’re not splitting up 1500 lines of css across 3 files, you’re creating 3 files with 1500 lines of code each. This is hell to maintain.

As for the ‘:’, they can have a function, depending on the context they are used in. It might be good to leave them out of a form, but for a caption/detail structure they are definitely needed when both caption and detail are separated by spans.

Not a big fan of this article, which is pretty basic, lacks focus and preaches the wrong things.

posted at 12:59 pm on October 21, 2008 by Niels Matthijs

6 Thanks! You've doen it again!

Just another great inspirational piece. Again, I have learned some new tools to do what I want to do in a better way.

Some of the ideas in this article I was using already, but this is well thought out solution. I will once again sharpen my skills using A List Apart.

Thanks Aaron!

posted at 01:23 pm on October 21, 2008 by Rob Hofker

7 Importance of Structure/organisation

I agree with Aaron and actually implemented something similar on a project I worked on a few years ago.

It certainly can become cumbersome, but I think if you’re strict about breaking up the declarations into different files based on the properties as Aaron mentions, then it’s a logical deduction that if you’re changing font, colour, or other properties, there is an appropriate file for those declarations and so all you have to look for is the id or class handle that calls it.

If elements have clearly identifiable classes and ids, tracking them down is very easy. This system also forces you to think about how to make the CSS robust and reusable, which introduces its own efficiencies.

posted at 01:24 pm on October 21, 2008 by Ben Ryan

8 stylesheet organization

I think it’s naïve to think that the media type only requires different layout styles (as shown in your stylesheet diagram). For instance, I usually specify a serif font (TNR/Georgia) for printed pages because it’s more readable in that format. I’m considering this approach:

• style.css (includes everything needed)
• print.css, screen.css, and other media types: all included from style.css via @media (as shown in this article): These contain all styles unique to the media type

• layout.css, type.css, forms.css, etc: Common styles that work for all media types: Imported from the media types (minor duplication of filenames)

Of course, such a complex structure (like the one in this article) should be compiled down to one stylesheet per media type, plus a common one for common styles included for all media types, minimizing HTTP requests.

Anyway, great article; it definitely got me thinking!

posted at 01:24 pm on October 21, 2008 by Thomas Allen

9 progressive fragmentation

I get separating out the style sheets, though I don’t fragment them as much as Aaron does in the article. I’ve found myself going with a single master style sheet – which I minimize if necessary, one for any IE bugfixes, then a print style sheet. I haven’t had any client ask for supporting any browser “lower” than IE6, so accounting for Communicator 4’s acceptance of @import doesn’t factor in at all.

I found the idea of using CSS to render the colons after form labels a gem. I struggled with that thought just last week. From a screen reader perspective, Aaron’s idea makes good sense.

Progressive enhancement – the yin to graceful degradation’s yang. Good stuff to generate conversations.

posted at 01:25 pm on October 21, 2008 by Pat Ramsey

10 Stylesheet separation means only more selectors

I found useful to use separate stylesheets for both IE6 and IE7, but I don’t think further fragmentation is a good idea. With type.css, layout.css, color.css you’ll end up with 3 times more selectors than if you use only 1 file. If you want to define style of a particular element you have to write definitions on 3 places in 3 files. Also debugging is harder.

posted at 01:37 pm on October 21, 2008 by Lubos Kmetko

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)