Who has never spend hours stuck on a design issue? Even if CSS is a very powerful and flexible language you can always face a situation where you don’t know what to do.

Here are some tips I use when I am stuck on a CSS problem:

Comment, comment, comment

It is usually more difficult to locate the problem than to resolve it. If you have a good CSS level you will always find a workaround. But when you don’t know what is going on…

The CSS comment tag is /* the commented part */.

Comment whenever you have an unexpected result. And try if possible to comment using the “zoom technique” (I just made it up). First comment multiple lines to see were it comes from and them comment few lines, and then one at the time.

Display as much as you can

Using borders and background-color to display the limits of your box might be useful. For a grid layout for example, try to display a different background-color in each structural div to see where they are. Box model issues are very often and if you don’t know where are the limit of your boxes it is gonna be tricky.

Use Firebug

Just try it! The most useful extension for web developer and designer. You can download at this address: https://addons.mozilla.org/en-US/firefox/addon/1843

Test regularly

Better to write one line at the time and test it, this way you can see immediately if it breaks or not.

Any thing else?

If you have some little tricks or tips to share. Things you use to make your life easier when debugging CSS? Don’t hesitate to post in the comment section