Troubleshooting CSS

If your CSS updates aren’t working as you expect, what’s the best way to troubleshoot it? It can be a bit of a rabbit hole, but here are 13 ways to check your CSS.

1. Have you saved the file?

Seems obvious, but absolutely worth double-checking.

2. Clear your cache

You’ll want to clear two, possibly three, caches: your site’s cache, your browser and your server cache (if you have one). You may not be aware of a server cache but some hosts, such as SiteGround and WPEngine, use server-level caching to speed up websites.

Clearing your cache is the browser equivalent of turning it off and on again.

3. Check for spelling/syntax errors

Is the selector spelt correctly? Is the punctuation and spacing correct in descendant selectors (i.e. is it nav.class instead of nav .class?

Another classic would be to forget to close the declaration, so your CSS looks like this:

p {
    color: #fff
    font-size: 1rem;
}

Notice how the color is missing the semicolon? That means the CSS file will read that code like this:

color: #ffffont-size: 1rem;

Urgh!

4. Does your rule appear in the inspector?

Does it have a line through it? If so, your selector needs to be more specific.

In Chrome’s DevTools, the Computed tab can show you what’s being rendered by the browser and the rules being applied to a specific element: really handy for tracking down inheritance and specificity issues.

5. Does the style you’re overriding have an !important in it?

Or is the style declared in the HTML element (e.g. <div style="color: #fff;">)? If so, you can only override that with another !important.

6. Is the element inheriting a default browser style?

This could be anything, so check the inheritance in the inspector.

7. Is the element wider/taller than you’d expected?

It might need box-sizing: border-box; applied to it so that the width and height are calculated based on the size of the border-box rather than the content box (the default).

8. Is it a browser incompatibility issue?

This is much less of an issue than it used to be, but worth checking if the issue is replicated in another browser. The website caniuse.com is a great tool to help with this as well.

9. Have you validated it?

If you’ve got this far and nothing has worked, it might be worth popping it into the CSS Validator to check it’s valid CSS. CSS Lint is another resource to check out that will give some additional feedback on what you’ve written.

10. Try replicating the CSS and basic HTML structure in a tool like Codepen

If it works there, but not in your site, you’re likely dealing with an issue of inheritance or specificity. This is especially likely if you’re using a framework or template.

More advanced checks

If the rule is shown in the inspector but it’s not taking effect, there’s probably something not quite right.

11. Have you applied the rule to the correct element?

Often things need to be applied to the parent element, especially things related to the display or position properties.

12. Does the element have the right value for display?

It’s always worth checking the display property, especially if it’s inline, inline-block or block. This might fix the issue, especially if you’re trying to apply a property that’s incompatible (or has no effect) when applied to the wrong one.

13. Can you actually apply that property to the element?

Not all properties can be applied to all elements. :visited is a good example of this, but there are lots of others.

This article was originally published at cssfordesigners.com