This has some advantages:
1. Your main stylesheet remains small
2. Your templates stay the same for all browsers. This saves soo much time doing redesign of the site of certain elements.
3. It is much more maintainable.

Normally you only need conditional comments when there is absolutly no other way, which would result in only small extra stylesheets, not ladden with tons of extra code.

We are trying to push forward the use of web standards and how we build HTML and use CSS to be more effecient with our code and then we examples like this are offered. I think Ajaxian is read by a lot of people and if this is put forward as best practice than we can just bury our efforts to improve readability and maintainability of our HTML templates and go back to drawing table layouts.

So what rules should you follow? Your HTML structure should look the same, no matter which browser is served. If you really really need too, if you will not have to do, if you have done your (X)HTML/CSS homework, then you can add extra information for IE through conditional comments or hacks, though both should be discouraged. Keep you HTML structure clean and without any sight of browser specific tags, otherwise this will end in a total maintenance nightmare!

Reasons I think this might be great: Valid HTML, lighter-weight than conditionals around LINKs, more reliable than UA sniffing, AND keeps related styles in close proximity.

1) Conditional stylesheets are not an effective method of maintaining large scale sites because its a nuisance to find the correct style, file caching systems require that the upload/delivery workflow is extended whereby your architecture needs to be quite need for renaming all includes, and for the aforementioned, the added hit for downloading an extra file.

2) This is obvious but the hacks mentioned above are horrible, why bother, everytime a new browser comes out you’ll have to test like there is no tomorrow. Conditional statements are stable, clean, and reliable; the method of their use is all that is relevant here.

Anyways kudos to you Nick. I may just adopt something similar.

Cheers,
Owen

We also built a script that builds IE specific style sheets based on previous “hacks.” It goes through and makes a stylesheet based on the only _ hacked rules.

#body1 { } /* standard styles */
* html #body1 { } /* ie6 fixes */

Furthermore, if you can use javascript you could do something like this:

// example for IE 7
if (document.all && !window.opera && window.XMLHttpRequest) {
document.getElementsByTagName(“body”)[0].className = “ie7″;
}

Then, define your styles like this:
body.ie7 #body1 { }

This method is going to be a godsend for us, in our situation where we have control over the HTML, but not over other business requirements (logical or otherwise) of the client.

1. Conditional Comments (this technique): IE only, should Firefox have conditional comments?
2. Using JavaScript to parse the user agent on the client to add a parent CSS Class: what if a user has JavaScript disabled or is a mobile browser that doesn’t support JavaScript?
3. Using a Server side view helper to parse the user agent and add a parent CSS Class (in maccman’s link): the most robust solution, in my opinion.

Personally, I still use the underscore hack for IE6. It works and keeps the IE-only styles alongside the styles for other browsers. That’s another benefit with the above solution over using separate CSS files. Cuts down on HTTP requests and keeps related styles together.

Used a similar trick before, but with the body element rather than divs.

Conditional comments around your CSS links/imports has the direct advantage of not downloading a whole bunch of un-needed stylesheets.

How about simply using conditional comments to load in an i.e. 6 only style sheet which you over ride your styles with i.e. ones.

Its what we do, and its easy and maintainable.