Here are a few common CSS mistakes I come across all the time. Yes these solutions might work when first developing in Firefox but these can cause major headaches when doing IE testing, debugging or making edits to the code in the future.

Don’t over use negative margins

Yes there is a time and place for negative margins. But if your find yourself using these on a daily basis then there’s probably and easier and better way to fix what you’re doing. Most likely a padding or margin on a parent element that can be adjusted. Use the box model properly, it makes debugging and editing the css later on much easier.

Don’t position every element

When trying to make a design pixel perfect I’ve seen developers relatively position every paragraph, link and heading in a div and change their top and left properties to line up with the flats. Not only is this a bad practice it is actually more work and causes more cross browser problems than adjusting padding and margins properly. Once again, the box model is your friend.

Don’t float every element

As with the positioning statement there’s rarely a time when floating every element is needed. Float only what’s needed and never declare a float globally. Ex:

#content div { float: left; }

This may be a quick fix when first starting a layout but what if you have other divs inside your #content that are not supposed to be floated. You’ll end up adding float:none for every div that shouldn’t be floated. The css above is also the perfect recipe for the IE6 double margin bug.

Don’t use !important

If you’re using !important it’s usually because something else is wrong in your code and you’re not using the cascade properly. Remember that !important is also inherited so in order to override an !important value you’ll need to use another !important! So the next time you go to add !important to your css take a good look at your parent elements and fix your code properly.

Group your css properly

The most common reason people use !important is because their cascade isn’t working properly and they need to overwrite a value. By keeping your CSS organized properly and keeping the cascade in mind when writing your code you’ll soon be writing better code, faster and easier. The basics of keeping your css organized are to declare global elements at the top and then getting more and more specific further down your css. This is not a small concept and definitely deserves it’s own blog post.