CSS @import Best Practices

Question

I'm soliciting opinions about what is the best way to handle @import's or to avoid them all together.

Working with DNN I'm finding that, while skinning, the CSS for all the various overriding elements for modules and such can be very messy. Dumping all of the CSS into a single file can be arduous to work with and I am wonder if it is better to separate these and import them at the top of the skin.css. There is the question of efficiency as well and if this is or isn't a good trade off.

I'm not a CSS pro but I think I may know the answer to this but will ask anyway. Is there anyway to reference various CSS files the same way as, say, .cs files? skin.Events.someElement ? Wouldn't that be nice? ;-)

Thanks.

Answer 1

It's best to avoid @import.

According to Steve Souders, combining, @import and link or embedding @import in other stylesheets will cause sequential rather than parallel downloads.

There are other problems as well.

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Yahoo also recommends against @import, noting that

In IE @import behaves the same as using at the bottom of the page, so it's best not to use it.

http://developer.yahoo.com/performance/rules.html#csslink

I usually use one stylesheet and use link to grab it.

For exceptionally large sites, I use one main stylesheet and then smaller sheets for sections that need additional styling, adding those stylesheets to various pages as necessary.

Answer 2

From pure experience:

While working you can keep everything separated (reset.css, forms.css, main.css, etc.) if you find it hard to work with one single file - I don't do even that..

When putting on production - keep everything in one file - no imports - 1 server request - minimize your css.

Exception is an additional ie.css if you want to keep your main.css hack free/pass validation (I also don't do this since not a single of my clients cared about validation - people want it to work, badges are not a trend :) - so i just use hacks trough my main.css (#, _, etc.))