5 Reasons to Avoid CSS Hacks and Conditional Stylesheets

http://www.sitepoint.com/blogs/2009/03/05/5-reasons-to-avoid-css-hacks-and-conditional-stylesheets/

SS is more of an art than a science. You can know about every combination of selector and be an expert in every styling property, yet still be unable to lay out and style your website as you want.

There are several reasons why developers from traditional programming backgrounds dislike CSS:

1. Learning the rules is only half the game – you need experience to really understand CSS.
2. CSS can be illogical and require too much trial and error.
3. Even if Browser X renders your page perfectly, Browser Y could fail dramatically.

Many web sites and applications are considered complete only to find that it breaks in a certain browser. Web developers therefore resort to hacks and conditional CSS to fix the issues as quickly as possible.

Unfortunately, quick-fix development can cause more problems in the long run…

1. CSS validation may not be possible
There are many tools, such as the Firefox console and the W3C validation service, that help developers find errors within CSS code. Unfortunately, hacks and conditional stylesheets often rely on invalid CSS to exploit a known browser bug or apply vendor-specific properties. If your CSS is already throwing errors, you may miss the real problems.

2. Your CSS becomes more complex
Quick fixes generally apply further rules to your existing rule set. In the case of conditional CSS, those rules will also be in a separate file and only apply under certain conditions. Whilst tools such as Firebug can help locate and analyse the code, they are not available in every browser. The increased complexity makes debugging and maintenance more difficult.

3. Your CSS may not be future-proofed
Hacks rely on browser bugs. Unfortunately, the next version of that browser may fix the very bug you depended on. This was certainly one of the causes of IE6-compatible sites breaking in IE7, e.g. the * html selector was was incorrectly applied by IE6 but fixed in IE7.

If your website already relies on IE6 and IE7 conditional stylesheets, it is extremely likely you will require one for IE8.

4. It is browser detection
Webpages should be device-independent. Whilst we do not live in an ideal world, browser detection always feels a little dirty. It is certainly avoided in JavaScript and server-side code, so why use it for CSS?

5. There is rarely a need for them
It is unusual to find a design that could not be created by an experienced coder using standard CSS that works in all the popular browsers (and, yes, that includes IE6). Minor rendering differences are always inevitable, but the CSS code can remain clean and valid for all browsers.

Ultimately, hacks and conditional CSS can lead to poor development practices and a failure to diagnose or understand the real problem. The key is to test early and test often: find the issues at the start of the project and you will not need to resort to quick fixes at the end.

Don’t believe me? See 10 Fixes That Solve IE6 problems…

Have you successfully avoided hacks and conditional CSS or have they been essential within every project?