Debugging CSS the Fast Way
If you’ve been working with CSS for long at all, you’ve probably spent a fair bit of time debugging seemingly intractable problems that turn out to have a very simple solution. The question: What can we do to debug our CSS faster?
Validate your CSS
You may know the CSS spec inside and out, but this should still be one of your first steps. A CSS validator doesn’t just check to make sure you’ve been using the correct properties. It will also produce errors for most typos, like missing a quotation mark or a semicolon.
And discovering after hours of debugging that the problem was a missing quotation mark would be a bit embarrassing wouldn’t it? (No, I most definitely am not speaking from personal experience.)
Use a text editor with code highlighting
You know that missing quotation mark I mentioned earlier? Chances are you could have avoided it if you’d been using an editor with code highlighting (such as E - TextEditor) instead of editing in a content management system’s non-highlighted stylesheet editor.
Code highlighting helps you pick up on bad syntax almost unconsciously. And anything to reduce the burden of consciousness is a good thing.
Isolate the problem with commenting
If all else fails, use the process of elimination. Comment out sections of your HTML or CSS, starting at a pretty high level (such as removing the entire header) and see if the problem remains. If it does, move on to the next section. But if the problem is in that section of code, try isolating it further by commenting out subsections.
Repeat this process until you’ve isolated the element(s) which are causing you difficulty. Then you can inspect the problem element and figure out exactly why it has decided to cause you so much grief.
Do you have any other tips for debugging CSS?
Popularity: 33% [?]
If you're new here, you may want to subscribe to my RSS feed or subscribe via email. Thanks for visiting!
How about this: to help make sure that you’re targeting the element you want, temporarily apply a border to the element- preferably a bright red. You can be sure that you’re targeting the element you want, and ensure that your style isn’t affecting other, unwanted elements.
Trav
That’s a good suggestion, Travis. I’ve used that a few times myself.
Darn, travis already said it. I use that technique as well - works like a charm.
Great tips :)! I also use the red border technique, and lately I’ve been using a fantastic little Firefox extension called Aardvark which definately speeds up my debugging process because it let’s me see css blocks by mousing-over them in the browser window - http://karmatics.com/aardvark/
Those are good tips - I actually even wouldn’t call the first one, validation, a tip… it is ESSENTIAL!
Other tips and tools that have become second nature for me when developing with CSS:
1. apply an outline to structural divs and other elements, as a visualization method - e.g. div#box {outline:1px dotted #c00;} — this works much better than borders because it is drawn over the element but doesn’t actually add dimension to the element’s box (which borders do). Only drawback: outline doesn’t work in IE.
2. in the same vein as using outline, apply background colors
3. the Web Developer tool bar offers built-in diagnostic tools and more. Use it with Firefox… you are of course, developing your site using Firefox or other modern (not IE) browser, right?
@Jeremy: Well, you can always say it again if you’d like.
@Harmony: I’ll have to check into Aardvark.
@David: That’s a great idea. For some reason I never realized that you could do that with outlines. I guess there’s always more to learn!
I do use the Web Developer toolbar, but tend to use Firebug more often, because of its visualizations.
Hey another great tip is to use this plugin for firefox called Firebug. It allows you to right click on any element in a webpage, and “inspect it” what that does is show you two things. The markup in DOM format of where that element sits, as well as all the CSS that is applied to it. From there you can dynamically make changes and see it on the webpage in realtime.
*keep in mind it doesn’t save the changes, just previews them for you.
@Elvis: Yes, Firebug is an awesome extension.
Great job, I use notepad++ that’s free and open source for all my projects, and also when I upload my files to the webserver, I pass them by the HTML Tidy (that also works with CSS).
I really like your blog, you’re in my RSS Feeds.
Bye!
@Franco: Thanks! I guess I’ll have to try Notepad++ sometime since I’ve had a couple of people recommend it to me.
@Travis Stone: Instead of setting the border-color to bright red, it is better to set the background-color, so you won’t mess up your layout.