I lay my styles out in 1 file and I don't often comment them. Stylesheets cascade to much to pin them to a specific area of use - it's easier to debug them by clever naming still - sigh. IE specific files loaded after and only contain 1 or two tricky IE tweaks. Javascript /Jquery plugins sometimes come with their own stylesheets, and in those cases I'll leave them where I found them. For some of the bigger sites with very different looks and feels, I'll often have a boilerplate (reset to skeleton level) and each page or section will load in their own stylesheet. Just depends how big the site is.

Order is: * Reset (only for early IE )-http://developer.yahoo.com/yui/reset/ I find myself using it less and less

* Global Styles - HTML tags - global font faces

* Clearfix - http://www.webtoolkit.info/css-clearfix.html

* Skeleton/Structural Styles - grids/divs/columns

* Headers/footers/persistent styles

* Page specific styles and IDs

* Conditionally load IE Styles if they're required

* load javascript plugin css with the plugin's preferred dir if possible

As for pipelining them, I usually just use a gzipped connection and still serve them individually, since internal image paths for backgrounds rely on the CSS path. CSS caches very nicely, so take advantage of it on the HTTP side.

example: http://code.google.com/p/streeme/source/browse/trunk/web/css...