CSS optimization tips @import

Question

I ask for opinions on how best to handle @import or to avoid them all together.

When working with DNN, I find that when skinning CSS for all the various module override elements, etc. can be very dirty. Dumping all CSS into a single file can be difficult to work with, and I wonder if it is better to separate and import them to the top of skin.css. There is also a question of effectiveness, and if this is or is not a good compromise.

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

Thanks.

Answer 1

From pure experience:

During operation, you can keep everything separated (reset.css, forms.css, main.css, etc.), if it is difficult for you to work with one file - I do not even do this ...

When creating products - save everything in one file - without importing - 1 server request - minimize your css.

The exception is additional ie.css if you want to keep your access check / pass pass main.css (I also do not do this, since none of my clients cared for validation - people want it to work, icons are not a trend :) - so I just use hacks through my main.css (#, _, etc.))

Answer 2

Better to avoid @import .

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

There are other problems.

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 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 capture it.

For exceptionally large sites, I use one main style sheet and then smaller sheets for sections that need extra style, adding these style sheets to different pages as needed.