No. 1 CSS Debugging Tip

There is one principle of debugging that has saved me more hours of frustration than any other. It’s applicable to all programming languages, including CSS. It’s bailed me out on countless occasions when nothing else would. I’ve learned to use it not just as a last resort because it’s often quicker than challenging my brain. It may seem obvious. But I only started using it methodically after I read a suggestion in a forum.

Take Things Away Until The Problem Goes Away

That was the simple suggestion I read in a forum many moons ago. When something goes wrong and you don’t understand why, temporarily remove selectors and/or styles. This will soon reveal the point of failure even when your best inferences have fallen flat.

You can disable folders, selectors, tabs, and single property groups (e.g. padding) by clicking the various disable icons throughout the interface. If coding by hand, you can comment out lines using /* and */. Or cut and paste code into a blank notepad for safe keeping.

HTML elements sometimes affect the page in non-obvious ways. You can simulate removing HTML elements by targeting them with a selector and then setting the display property to none.

An alternative to setting display to none in Microthemer is removing the element via Chrome’s HTML inspector. Right-click a HTML element and choose ‘Delete element’. The page will update as if the element did not exist on the page. Chrome doesn’t really delete the element from your site though. It just gives you a temporary preview of what the page would look like if it wasn’t there. To return the page to normal, simply refresh your browser.

Chrome’s browser inspector also provides a convenient way of disabling individual CSS styles. Hover your mouse over any style rule in the righthand CSS pane. Then uncheck the checkbox that appears to see the effect of disabling the style. Again, Chrome doesn’t really remove the CSS from your site. To return the page to normal, recheck any unchecked styles or refresh your browser.

Finally, Chrome can make your life easier by simulating the hover state for an element without you actually having to hover your mouse over it. This makes it easier to style elements in the hover state in Microthemer without having to move your mouse over the element after every style change. Just right-click the HTML in the left pane and choose :hover.

Splitting The Haystack To Find The Needle

Isolating the point of failure among a thousand lines of code or a hundred selectors may seem daunting. But the take-things-away technique can still deliver quick results. The trick is to disable half of the code, and then half of that half again until you find the right section.

In 6 moves you could reduce 1000 lines of code to just 15. First you take away 500 lines. If the problem remains, return the 500 lines you removed and take away the other 500. If the problems goes away, you know the cause is somewhere in those second 500 lines. Take away 250 lines from that section to drill down further. And so on until you have only one line of code left. That line is the culprit.

When using Microthemer’s graphical interface (GUI) you won’t work with lines of code. So you initially disable half of the folders. When you’ve isolated the causal folder, you disable half of the selectors. And so on. Until you find the causal style rule.

Of course the take-things-away technique is not infallible. Removing half a stylesheet can break things in such a way that obscures the initial problem. It always worth a try though. Trust me.