Spotting errors in CSS

Unlike in many other languages, there are neither logs nor redline errors in the console with CSS.

It makes things a little more complicated, and it’s easy to write inactive rules. It could be a buzzkill.

Check browser support

Do it crescendo. It’s no use diving into the code if the browser does not support your properties and values.

It might seem trivial, but I’ve seen it so many times.

The excellent caniuse can help you to check that.

It can save you some time.

Use the CSS validator

Use the CSS validator to check your work. You can enter your URL, upload your CSS file, or even directly copy/paste your code.

It may seem obvious, but the validator is an efficient way to detect errors.

Make the most of your code editor

VS code is one of my favorite editors. It has many practical features to speed up your dev, including syntax highlighting and autocomplete you can use to spot common errors and save time.

It’s possible thanks to Intellisense, a set of helpful editing features that supports many languages, including CSS.

Note that it can underline typos and oversights in red, so you don’t lose precious minutes just for missing curly brackets.

Use the inspector

Not all CSS errors are that easy to find. It’s not uncommon, especially for beginners (but not only), to write inactive CSS.

In such a case, the CSS may be perfectly valid, but it does not work. Things get a little more complicated.

Fortunately, most browsers provide an inspector, for example, the Chrome DevTools. Right-click where you need on the page and select “inspect” or use the keyboard’s shortcuts.

Source: Google - Dev Tools

You get helpful insights about your CSS, and you can live edit the code to avoid reloading your page repeatedly to diagnose the problem.

Learn the cascade

Stylesheets cascade. Because it’s not rare to have two rules that apply to the same element, you must understand that concept and how inheritance works in CSS to fix potential conflicts.

That often explains why your styles do not apply.

A typical example would be:

.site-title { 
    color: pink; 
}
        
h1 { 
    color: green; 
}
<h1 class="site-title">The best blog</h1>

Which color applies?

If you believe it’s green, that’s because you think about the order, and that’s something to consider because CSS does take into account the order, the rule that comes last is supposed to win.

The problem here is that classes take precedence over elements. The title’s color is pink.

Besides, inherited styles can add some confusion, as child elements inherit specific properties such as colors and fonts from their parents but not others:

.header { 
    color: pink;
    border: 1px solid pink;
}	
<header class="header">
    <h1 class="site-title">The title</h1>
</header>

In the example above, the title’s color is pink because of its parent, but it does not inherit the border styles.

It’s tricky for sure, but that also prevents unnecessary repetition. A good practice is to apply general styles to elements and use classes to style specific ones.

Inline styles

.header { 
    border: 1px solid green;
    color: green; 
}
.site-title { 
    color: blue; 
}
<header class="header">
    <h1 class="site-title" style="color: pink;">The best blog</h1>
</header>

Here, the title’s color is still pink because inline styles take precedence over external stylesheets.

You know those stuff, but that still doesn’t work

Sometimes the cascade is okay, but things fall apart because of one annoying keyword: !important.

It overrides anything, especially standard rules. It might be a good idea to run a search in your CSS files to check if that’s the culprit.

Using !important is like saying, “I want this rule to apply regardless of the context or what you might add after”.

Use it with caution.

Wrap up

CSS errors can be pretty hard to spot, but here are easy steps you can take to ease your debug and save time.