Simplicity is one important aspect of aesthetics in my opinion.

Over the past few days I have talked about CSS Reset, from simplest to intricate, and also talked about a simple way to indicate (highlight) the current page in the navigation bar without the use of Javascript nor PHP nor extensive workarounds which also works in a server-side-include.

When it comes to cross-platform and cross-browser coding I also believe that the less extensive and the more minimalist, the better.

I remember that well back in 2003 when I had proudly figured out how to apply browser sniffing via Javascript and managed to use 7 – yes, seven – different style sheets to handle my business website how cumbersome it all became: every change to one style sheet had to be applied to all seven, mostly in different ways to accommodate all variations of what I was trying to cover. Today, I shake my head and think, “crazy”.

There were 2 distinct reasons why I stopped using browser specific style sheets:

  1. As mentioned before, it quickly becomes a major hassle trying to keep many style sheets in sync.
  2. It is a waste and an added complication to have a ton of duplicate code to just use a few lines of specific code (compared to the overall) for handling specific browser issues.

Nowadays I much rather have it cleanly stacked together when a specific aspect has to be hacked. It is much easier to keep track and to apply small changes. For example, I like to use for single, simple things that need to be addressed that what I call my ultimate cross-browser-hack.

If by any chance a style sheet gets very, very long due to complicated navigation and many other beautifying styles, and addressing single items becomes convoluted, then I cut the styles sheets into logical, single style sheets, for example I will have a general one; one for the navigation; one for the store and so on. And as sequence is all in CSS, make sure you list them in correct order when you call them in your header style tag. Doing it like this, I was able to need only 3 style sheets for a business which makes 5 million in its Christmas season and still remain in control what code was where and to find my way quickly when change was called for.

My viewpoint is of course not everyones viewpoint. Two other approaches are described here: CSS Browser Selector | StylizedWeb.com.

Which approach do you prefer?