Generic Style Sheets
A Better Way to CSS
I have noticed that a lot web designers get CSS happy and try to create a specific style for darn near every object on there web site which leads to conviluted and jumbled code and style sheets that are a thousand lines long and quite frankly messy and hard to maintain. I too, once fell into this trap ,but after a few years of marathon site update sessions I decided that there had to be a better way.
First of all I got rid of all the duplicate stylesheets and css hacks for work arounds in the different browsers (hint: IE). It may take a while ,but it is to your benefit to learn what works in all browsers and just stick with those. Second I took a hint from my programming buddies and modularized my css code. Basically this means I place styles that affect specific HTML objects in different stylesheets. For instance, I will commonly imploy a stylesheet that only contains styles that munipulate text and font styles and have another that contains styles for the page layout and maybe another that contains styles that control how images are rendered on throughout the website.
In keeping with the advantages of the K.I.S.S method I make heavy use of simple or short classes that may only contain one or two style attributes. And I rarely add styles directly to html objects in my stylesheets. The beauty in this is that it makes for faster coding and website developement and portable stylesheets that you can reuse in multiple websites.
For instance lets say that you are creating a web page that contains an element that needs to be styled, but you don't really plan on repeating the styles throughout the site instead of playing around with your inline styles until you get it right why not just add and remove classes from the elements. Here's an example lets say you wanted a pretty div that had font at set to 75% and padding at 20px and a left margin at 30px. This is the inline code for that div:
<div style="font-size:75%; padding:20px; margin-left:10px;"> </div>
It would be nicer if you could do something like this:
<div class="normal pd20All m10L"> </div>
Each class contains the same style definitions in an external stylesheet, but using classes instead of inline styles makes your code look cleaner. At first it may seem like a bit of over kill to create a bunch of style sheets with simple classes, but once you have created your simple styles library you will have a collection of classes that you know are bug free and easy to use and trust me it can save you a headache or two when developing a large site that is content heavy.
Well, anyways, enough of my rambling about CSS and such. If you found this little ditty useful I have posted some simply stylesheets that I like to use when developing websites. You are free to preview and downloaded them for you own use if you like.