You can greatly reduce the number of css classes you use in a project by some best practices while writing or reviewing CSS code.
Use a CSS style Reset:
Browsers come with a default styling for most elements but unfortunately these definitions are not the same across all browsers. Even something as simple as a
tag can be interpreted differently across different browsers. (Bottom vs top margins in older versions of IE 6/7 vs FF and Chrome). Using a CSS reset makes all the default inherited definitions the same and will simplify your debugging while reducing the number of styles needed to account for different default element styling.
There are a number of resets you can find with a quick search. The most extensive is Eric Meyer’s reset, and this maybe a bit overkill as you will have to redefine all properties of every element. Experiment and see what works best for you and how you code. The CSS clear I use is attached below.
If you want to look into this further or if you want t help deciding which reset is right for you, a great article can be found from SixRevisions.
Create a Common CSS library:
Put all your generic one definition selectors in one place (generally the top as this will cascade better–more on this below.) If they only have one definition then you can very likely reuse the class elsewhere in the document. Keeping a generic name will allow you or someone else to easily understand the classes being used. Think float-left, float-right, clear-float, em, caption, highlight, center-text, center-auto, etc… I’ll list this out in another tutorial in the future.
I also declare all the colors used in a project as stand alone classes so I can quickly add them to a class without having to recreate a whole new class just to account for a change in text color.
I may not use the whole library in every project, but I use at least 75-80% and I know my commonly used code is there, and keeping all the colors in one placer makes it easier to copy and paste for other styles.
Cascade your CSS:
I start general and the work my way to being more specific. Using more specific selectors will allow you to drill down in setting properties. If you do this correctly you can greatly reduce the number of !important tags you use in your stylesheet.
CSS hierarchy: Element >> ID >> Classes >> !important >> DOM
Use Bug Killing CSS:
There will probably always be quirks among the many browsers creating the need for browser specific style sheets, but these style sheets should be as simple as possible. They should only list the properties for definitions that need to be overwritten to work in the given browser. Do not copy the entire rule. (I know this seems obvious-Its OK to laugh- but I’ve seen this on major websites).
Validate your CSS:
Don’t forget to use the w3c validation tools. This is the best way to spell check your style sheet in addition to checking syntax of all your elements. Plus, you’ll have the piece of mind knowing that your code is standards compliant.
