Use multiple css files or a single file organised by comments

Question

Hi, what is regarded as the best approach to organising css. At the moment I am using a single link in the head of my xhtml documents as follows:

<link rel="stylesheet" type="text/css" href="style/imports.css" />

In this file im importing several different css files i.e. reset.css, structure.css, skin.css

I know there is an overhead in doing this as each requires an extra trip to the server but it makes things much more logical and organised in my opinion. Does anyone have an opinion on how best to organise their css. - Would it be better to put all these seperate css funcions into one single file? Also, is it best practice to minify css.

Answer 1

Take a look at this

Answer 2

It depends on your situation. If you've got lots and lots of CSS code, you might want to split your code into multiple files to organize them a little. If you've not got that much of code, you could do with a single CSS file. I do prefer using a CSS compressor sometimes. Again it all depends on the circumstances.If you've got a small CSS file, compressing would not usually help much. When you compress, please do keep an uncompressed file for your development. I use the YUI Compressor. Its really easy to use.

Answer 3

I keep everything in separate sheets. And as far as development goes this is the way to do it. It makes things much easier to manage.

In production though its good not to have a ton of separate files. You can handle this by funning a compiler as part of your build process or you can use a minifier and cache to do this on the fly (which is what ive done in most of my apps).