Valid CSS at the expense of presentation or maintenance
When developing web sites or web applications, one of the things that I struggle with is straddling the line between valid CSS and addressing cross-browser quirks. For example, most of the time, if you’ve got valid CSS and valid XHTML, your design will most likely look the same across Firefox, Safari, IE7, and Opera; however, it will likely not look the same in IE6. This is because of a number of factors (the way that widths are calculated alongside padding and margins, for example) which brings you to two options: either you can forget having valid CSS and stay focused on getting the design to look right, or you can create separate stylesheets for IE6 and then for the other browsers.
At one point, I was all about adhering to standards. If the CSS did not validate, then I felt that I must find a way to tweak the design and the layout of the page elements to force it to work. By re-arranging page elements in the XHTML in order to force the CSS to properly work, you could potentially be cheating screen readers out of reading your page in the proper way. If you care anything about accessibility on the web, then this option is out of the question. Furthermore, the idea of forcing the layout to fit the styles just feels wrong. If XHTML is the body, then CSS is the attire. You don’t tailor a person for the suit, you tailor the suit for the person. So, although this works, this ultimately leads to poor information architecture. So what option does this leave? Assuming that the XHTML is properly structured, then you’ll have to pollute the stylesheets with a couple of hacks in order to get the page to behavior properly in all of the major browsers. Validation goes out the door at the expense of the design.
Though IE6 is an old browser, it still has a significant portion of the market share. This means that if you care anything about providing the same experience to all of your visitors, you can’t forget it. One thing that I’ve been considering doing when moving forward on personal web sites or web applications, is to create a CSS file for IE7, Firefox, Opera, and Safari, and create a separate file for IE6. This would allow for creating completely valid CSS for the majority of the browsers, and allow you to still create the same presentation for the IE6 users although with invalid CSS. This, though, comes at the expense of two things - first, you’ll have to include some conditional comments in the head node of all of your pages, and, secondly, you’ll now be responsible for maintaining multiple CSS files. Depending on what you consider important, this may or may not be a viable option.
Overall, it’s lame that we’re in the predicament that we’re in regarding making these decisions, but we are so we’ve gotta make do with what we have. At any rate, I’m not saying that either of the above suggestions are more right than the other, and I’m not saying that I have an opinion on what’s best - any other thoughts or suggestions are welcome. I thought I’d just throw this out there.