The BDN test

I have probably troubleshooted some 30,000 websites in the last 4 years. Irrespective of what WordPress theme is currently active, one of the most common mistakes folks make is writing erroneous code in their stylesheet that causes the browsers to not render any CSS code below the error point. Ex.: Missing closing brace.

When you are working on a site and pulling your hair out as to why the CSS you have written isn’t working, do the simple what I call as the “bdn” (Body Display None) test.

Bring up Firebug or your browser’s built-in developer tools, edit your stylesheet and type the following at the END:

body {
display: none;
}

If the content of your entire webpage has not gone away then something is wrong with your CSS code.

Now that you have determined you need to fix your CSS code, how do you identify what and where?

Here are a few suggested approaches:

1) Validate your site for CSS errors at W3C’s CSS Validator.

Scroll down to where your stylesheet [having the error(s)] is, look at the listed ones, identify error inducing code and fix.

Remember: If you are Sherlock Holmes, CSS Validator is your trusted assistant, Watson. It is up to you to identify the problem using the shortlisted info presented by the Validator.

2) Delete (ctrl/cmd + X so you can paste) a portion of your stylesheet code from the bottom in Firebug while keeping the bdn code all the way at the end. Look at the webpage’s content and see if it has disappeared or not.

If the content is still present, do the ctrl/cmd + X again several runs until you see that the webpage content no longer appears. Paste what you have in your clipboard in a text editor like Sublime Text (set syntax to CSS or save it as temp.css) and scan it for obvious errors like missing braces.

Once you locate the issue, apply the corrections in your website’s stylesheet(s).

3) Hire me.

Next time you find your CSS to not work in an inexplicable manner, do the bdn test first.