The Pain of CSS done Wrong

I thought I would share a recent experience that I had with designing a CSS template for a large web application. Development work on this application started well over a year ago, with the primary users being employees of government agencies. The requirements for browser support were pretty simple, Internet Explorer version 5.5 or above. Almost all of the users are on Windows PCs, so the pesky IE for Mac wasn’t a concern. As I built the framework of this application, I added CSS styles to a master style sheet on an as needed basis.

Here is where I made my first mistake. Once you get to a point, where your CSS file reaches over 800 lines - and you haven’t finished it, you have a problem. Not only is this a fairly large burden to load, but maintaining it becomes troublesome. Since I had no plan, no roadmap for developing it - the file became a mess in a hurry.

The second mistake I made was only designing and testing my styles with only IE in mind. Most of the styles, thankfully, are fairly simple and do not use things like the voice hack, however, as I have come to see almost all of the positioning styles do not work the same in the Mozilla browsers (Netscape, Mozilla, and Firefox), Opera, or IE for Mac. Now, of course, the security problems with IE have become well known and documented, and use of Firefox and Netscape is on the rise with government agencies and contractors that work with them. D'OH! This is the big ouch - going through a large, complex web application page by page to find all of the style issues is extremely time consuming.

So, what have I learned? Well, the lessons learned are pretty clear:

1. Plan out your CSS file before you write it. Make sure you cover the basic required styles (body, p, h1...h4, etc).
2. Design with Firefox or Netscape (v7.2+) - if the style looks good in the Fox, it most likely will look at least similar in IE. And if it doesn't, the IE hacks are well documented and can be found quickly through Google.