Imagine: You’ve been working on your brand new, beautifully cascading style sheet for most of the day. You save your work, load it into a browser, and… what the heck?! Nothing’s working right! You know you didn’t make any huge errors in your code, but something is obviously wrong.
We’ve all been there before. But instead of wasting endless hours debugging your code, here are a few very simple things you can check in your CSS before you start pulling out your hair.
Closing brackets are notoriously easy to miss, especially if you don’t put them on a line all by themselves (and I usually don’t). Missing a single closing bracket can throw off your entire website, because the browser quits loading your rules as soon as it encounters the malformed code.
.sidebar {
width: 200px;
background-color: #333;
.sidebar h3 {
/* None of these rules are applied! */
font-size: 1.4em;
color: #fff; }
A missing semicolon can likewise cause your code to start behaving wonky. CSS specifications state that you don’t need a semicolon on your very last rule before your closing bracket, but in my experience that’s a great way to set yourself up for some heartbreak. As soon as you decide to add one more rule to that property, that missing semicolon is going to rear its ugly head.
.sidebar {
width: 200px;
background-color: #333
/* The following rule won't render! */
padding: 5px;
}
Is there any chance you have a misspelled class or ID? It may sound obvious, but I’ve spent far too much of my life trying to debug my CSS just because I misspelled something along the line. This, if anything, is a good reason to stick to whole words (or at least common abbreviations) when writing your CSS classes and IDs – it’s going to be easier to notice a misspelling in the “leftSidebar” class than it is the “ltSdbr” class.
.siedbar {
/* Dunno what a siedbar is, but I'm
pretty sure it's not in my XHTML. */
width: 200px;
}
Misspelled properties or values have also caused me more than their fair share of trouble. There are certain words I tend to misspell when I’m typing too quickly, and it just so happens that there are a lot of CSS properties with related names. I don’t care how much I’m “in the zone,” there’s still about a 50% chance I’m going to try to apply a “bakcground-color” somewhere along the line.
.sidebar {
/* The following property does exactly
bupkis. Dyslexics Untie! */
bakcground-color: #333;
}
Bad CSS values can be a bear to hunt down, particularly if you’re convinced that the value you’re using really exists. Some invalid values are more obvious than others – a background-color of “1px” would be relatively easy to spot, but what about a vertical-align of “center,” like I mentioned last week? We tend to think of things as being either aligned to the top, center, or bottom of a space… but CSS classifies that second option as the “middle,” not the center. An alignment of center won’t create nearly the presentation you’re expecting.
.sidebar img {
/* This image isn't really going anywhere. */
vertical-align: center;
}
If you start your CSS debugging by looking at these five common problem areas first, there’s a good chance you’ll save yourself a whole lot of time – and a massive headache to boot. If you have any other ideas for common areas of CSS misstep, offer them up in the comments!