Web Sites: how to keep things tidy (with style sheets)

Tweet

Almost three years ago, I have inherited a web site management. That web site was developed by a third party (a not-so-much-skilled web designer), using a mixture of different programming languages (JavaScript and VBScript) supported by CSS style sheets. In the past days, I've been asked to revamp the web site. Mainly, they asked for a change of colors... well, actually they wanted to obtain some sort of negative image of the web site. That means changing the black into white, and the whole grey color palette.
I am sure some of you will think that it's quite an easy task to do. And that's true... just when you (or your predecessor) have kept the things tidy!

Tidy?

Yes, tidy! Clean, clear, neat, comprehensible. Maybe it's my mistake. I should have started cleaning up the code a while ago. And now, a simple color change will take more than just a few click-and-change of the style sheets. That is why, when developing a web site, I always try to be coherent and consistent. I try to keep things tidy! For example, when I look into the CSS styles I have to change, I can see that whoever wrote them left a lot of unused styles. There's no comment, and the styles are defined with incomprehensible names. That leads to searching the whole web site for styled tags before applying changes or - maybe - use the try-and-see technique (which makes me feel like a blind man walking on a broken glass covered floor!).
What will I do? I don't know at the moment. The marketing department will give me the new palette, and probably I will spend some time changing things around, and trying to find the best way to deal with the issue. Probably I will extensively use the Web Developer Extension for Firefox and its CSS "Border Box Model" in order to search and understand how the CSS styles were applied and used.

How to avoid all that?

Well, it's quite simple. When developing your new web site keep things tidy (I know you already hate that word!). How? First of all, keep your style sheets updated. When a style is obsolete (for any reason whatsoever), just delete it. Or - if you want to keep it - comment it out and add the reason why it is to be considered obsolete.
When defining the styles, please use meaning names (like black_title or white_heading), not cryptic names like adt!
Another thing: if you decide to use external style sheets (and I strongly recommend it) do not - ever - add styles to the page. External files or styles in every page: never mix!

Those are simple and understandable advices. I don't follow those tips because I know someone else will take my job: I do it for myself! I could add more advices, however that's a good start. If whoever coded the web site I have to change, would have followed those recommendations, now my work would have been really easier and quick to complete.

Think about it. Web sites are not always made from scratch. You might be asked to change an old web site, and if things were not kept tidy, you might end up thrusting your head into a big mess!